diff --git a/.claude/rules/code-style.md b/.claude/rules/code-style.md
index 26308072d92..6d8fdb47ae2 100644
--- a/.claude/rules/code-style.md
+++ b/.claude/rules/code-style.md
@@ -83,6 +83,16 @@ export default MyComponent;
 
 ## Smalruby Marker Comments
 
+### マーカーが必要なファイル / 不要なファイルの判定
+
+**Smalruby 固有ファイル（＝ Prettier 対象ファイル）にはマーカー不要。**
+
+- Prettier 対象ファイル一覧（`smalruby-prettier-files.md`）に含まれるファイルは Smalruby 独自ファイル
+- これらのファイルを修正する際、`=== Smalruby:` マーカーは **一切不要**（ファイル内のどこにも付けない）
+- upstream（Scratch）のファイルを修正する際のみ、修正箇所にマーカーコメントを付ける
+
+### upstream ファイルのマーカー記法
+
 upstream のファイルに Smalruby 固有のコードを追加する際は、必ず **マーカーコメント** で囲む。
 
 ```javascript
@@ -93,11 +103,10 @@ upstream のファイルに Smalruby 固有のコードを追加する際は、
 
 - Start と End は必ずペアにする
 - `<機能名>` は英語で、何の機能かわかる名前にする
-- ファイル全体が Smalruby 固有の場合はファイル冒頭に `// === Smalruby: This file is Smalruby-specific (<説明>) ===`
-- マーカーを追加・削除したら、該当パッケージの `development.md` のマーカー一覧を更新する
+- マーカーを追加・削除したら、該当パッケージのマーカー一覧を更新する
 
-詳細は各パッケージの development.md を参照:
-- `.claude/rules/scratch-gui/development.md` — scratch-gui のマーカー一覧
+マーカー一覧:
+- `.claude/rules/scratch-gui/smalruby-markers.md` — scratch-gui のマーカー一覧
 - `.claude/rules/scratch-vm/development.md` — scratch-vm のマーカー一覧
 
 ## Documentation
diff --git a/.claude/rules/scratch-gui/e2e-test.md b/.claude/rules/scratch-gui/e2e-test.md
new file mode 100644
index 00000000000..3c1de207e6d
--- /dev/null
+++ b/.claude/rules/scratch-gui/e2e-test.md
@@ -0,0 +1,118 @@
+# E2E Testing (Playwright MCP & Selenium Integration Tests)
+
+## data-testid Convention
+
+**Playwright MCP と Selenium integration tests の両方で `data-testid` 属性を使用する。**
+
+- 新しいボタン・フォーム要素を追加する際は、必ず `data-testid` を設定する
+- Integration tests では `data-testid` を優先的に使い、XPath や title 属性での要素指定を避ける
+- `data-testid` を使うことで、属性の追加漏れを防ぎ、テストの安定性を高める
+
+### Integration Tests での data-testid 使用パターン
+
+```javascript
+// ヘルパー関数（テストファイル内で定義）
+const clickByTestId = (d, testId) =>
+    d.executeScript(`document.querySelector('[data-testid="${testId}"]').click()`);
+
+const isActiveByTestId = (d, testId) =>
+    d.executeScript(
+        `return document.querySelector('[data-testid="${testId}"]')` +
+            `?.className?.includes('Active') ?? false`,
+    );
+
+// 使用例
+await clickByTestId(driver, 'ruby-toolbar-mode-dncl');
+expect(await isActiveByTestId(driver, 'ruby-toolbar-mode-dncl')).toBe(true);
+```
+
+### Naming Convention
+
+`data-testid` は `<component>-<element>` の形式:
+- Component prefix: コンポーネント名をケバブケース（例: `ruby-toolbar`）
+- Element suffix: 要素の役割をケバブケース（例: `mode-dncl`）
+
+### Ruby Toolbar (`ruby-toolbar.jsx`)
+
+| data-testid | 要素 | 説明 |
+|------------|------|------|
+| `ruby-toolbar-execute` | button | 実行/停止ボタン |
+| `ruby-toolbar-undo` | button | 元に戻す |
+| `ruby-toolbar-redo` | button | やり直す |
+| `ruby-toolbar-search` | button | 検索 |
+| `ruby-toolbar-auto-correct` | button | 自動置換トグル |
+| `ruby-toolbar-rubytee` | button | ルビティー（AI） |
+| `ruby-toolbar-mode-furigana` | button | ふりがなモード |
+| `ruby-toolbar-mode-ruby` | button | Rubyモード |
+| `ruby-toolbar-mode-dncl` | button | 日本語(DNCL)モード |
+| `ruby-toolbar-more-menu` | button | その他メニュー |
+| `ruby-toolbar-menu-download` | div | Rubyスクリプト保存 |
+| `ruby-toolbar-menu-insert-class` | div | クラス挿入 |
+| `ruby-toolbar-menu-preview` | div | プレビュー |
+| `ruby-toolbar-menu-auto-correct-settings` | div | 自動置換設定 |
+
+### Target Selector (`target-selector.jsx`)
+
+| data-testid | 要素 | 説明 |
+|------------|------|------|
+| `ruby-toolbar-prev-sprite` | button | 前のスプライト |
+| `ruby-toolbar-next-sprite` | button | 次のスプライト |
+| `ruby-toolbar-sprite-search` | input | スプライト検索 |
+
+## Playwright MCP での操作例
+
+```javascript
+// data-testid でボタンをクリック
+// Playwright MCP の browser_click で ref を使う代わりに、
+// browser_evaluate で data-testid を使って操作する
+await page.evaluate(() => {
+    document.querySelector('[data-testid="ruby-toolbar-mode-dncl"]').click();
+});
+
+// または Playwright のロケーターを使う
+await page.getByTestId('ruby-toolbar-mode-dncl').click();
+```
+
+## URL Parameters for Testing
+
+Playwright MCP でテストする際は以下の URL パラメータを使用:
+
+```
+http://localhost:8601?no_beforeunload=1&tab=ruby&ruby_version=2&rubyMode=ruby
+```
+
+| Parameter | Values | Description |
+|-----------|--------|-------------|
+| `no_beforeunload` | `1` | beforeunload ダイアログを無効化（必須） |
+| `tab` | `ruby` | Ruby タブを初期表示 |
+| `ruby_version` | `2` | Ruby バージョン |
+| `rubyMode` | `ruby`, `furigana`, `dncl` | Ruby タブの初期モード |
+
+## Monaco Editor の操作
+
+```javascript
+// エディタの内容を設定
+await page.evaluate(() => {
+    monaco.editor.getEditors()[0].setValue('move(10)\n');
+});
+
+// エディタの内容を取得
+const content = await page.evaluate(() => {
+    return monaco.editor.getEditors()[0].getValue();
+});
+
+// エラーマーカーを取得
+const markers = await page.evaluate(() => {
+    const model = monaco.editor.getEditors()[0].getModel();
+    return monaco.editor.getModelMarkers({ resource: model.uri }).map(m => ({
+        line: m.startLineNumber,
+        message: m.message,
+        severity: m.severity
+    }));
+});
+
+// エディタの言語を取得
+const lang = await page.evaluate(() => {
+    return monaco.editor.getEditors()[0].getModel().getLanguageId();
+});
+```
diff --git a/.claude/rules/scratch-gui/smalruby-markers.md b/.claude/rules/scratch-gui/smalruby-markers.md
index 6e0bd79acac..c94817a4a82 100644
--- a/.claude/rules/scratch-gui/smalruby-markers.md
+++ b/.claude/rules/scratch-gui/smalruby-markers.md
@@ -11,30 +11,15 @@ paths:
 description: "Smalruby マーカーコメントの一覧と規約。upstream ファイルへの Smalruby 固有コード追加や upstream merge 時に使用。"
 ---
 
-# Smalruby Marker Blocks
+# Smalruby Marker Blocks (scratch-gui)
 
-Smalruby のカスタムコードは upstream ファイルの中に **マーカーコメント** で囲んで配置する。
-upstream merge 時にコンフリクトを解決しやすくするための仕組み。
+upstream ファイルに追加した Smalruby 固有コードのマーカー一覧。
+マーカーの書式・ルールは `.claude/rules/code-style.md` の「Smalruby Marker Comments」を参照。
 
-## マーカーの書式
+**重要**: Smalruby 固有ファイル（`smalruby-prettier-files.md` に記載されたファイル）にはマーカー不要。
+このファイルに記載するのは **upstream ファイルに埋め込んだマーカーのみ**。
 
-```javascript
-// === Smalruby: Start of <機能名> ===
-// ... Smalruby 固有のコード ...
-// === Smalruby: End of <機能名> ===
-```
-
-ファイル全体が Smalruby 固有の場合:
-```javascript
-// === Smalruby: This file is Smalruby-specific (<説明>) ===
-```
-
-## ルール
-
-1. **upstream ファイルに Smalruby コードを追加するときは必ずマーカーで囲む**
-2. **マーカー内のコードだけを変更する** — マーカー外は upstream の管轄
-3. **新しいマーカーを追加したら、このセクションに記載する**
-4. **マーカーを削除する場合は、このセクションからも削除する**
+マーカーを追加・削除した場合は、下記の一覧を更新すること。
 
 ## 現在のマーカー一覧
 
@@ -68,24 +53,6 @@ upstream merge 時にコンフリクトを解決しやすくするための仕
 | `src/reducers/settings.js` | URL params for Playwright | URL パラメーター import |
 | `src/reducers/settings.js` | ruby_version URL param | Ruby バージョン URL パラメーター |
 
-## Smalruby 固有ファイル（ファイル全体がマーカー）
-
-| ファイル | 説明 |
-|----------|------|
-| `src/components/connection-modal/mesh-v2-initial-step.jsx` | Mesh v2 初期接続ステップコンポーネント |
-| `src/components/connection-modal/mesh-v2-network-filtered-step.jsx` | Mesh v2 ネットワークフィルター検出コンポーネント |
-| `src/reducers/smalruby-registry.ts` | Smalruby reducer/state の一括エクスポート |
-| `src/lib/blocks-gesture-recovery.js` | ジェスチャー復旧ハンドラー（ブロックドラッグのスタック防止） |
-| `src/lib/url-params.js` | Playwright テスト用 URL パラメーター解析ユーティリティ |
-| `src/containers/ruby-tab/debug-globals.js` | Playwright MCP 用デバッググローバル変数 |
-| `src/lib/rubytee-api.js` | Rubytee Relay API クライアント |
-| `src/lib/rubytee-context.js` | Rubytee 状態コンテキスト構築 |
-| `src/containers/rubytee-modal-hoc.jsx` | Rubytee モーダル HOC（同意フロー + チャット） |
-| `src/components/rubytee-modal/rubytee-modal.jsx` | Rubytee チャット UI |
-| `src/components/rubytee-modal/rubytee-modal.css` | Rubytee チャット CSS |
-| `src/components/rubytee-consent/rubytee-consent.jsx` | Rubytee 同意確認ダイアログ |
-| `src/components/rubytee-consent/rubytee-consent.css` | Rubytee 同意確認 CSS |
-
 ## 関連ファイル
 
 マーカーで囲まれたコードが参照するファイル:
diff --git a/.claude/rules/scratch-gui/smalruby-prettier-files.md b/.claude/rules/scratch-gui/smalruby-prettier-files.md
index 5ca6c548731..88a3bf8b692 100644
--- a/.claude/rules/scratch-gui/smalruby-prettier-files.md
+++ b/.claude/rules/scratch-gui/smalruby-prettier-files.md
@@ -128,6 +128,7 @@ upstream (Scratch) ファイルは対象外。
 - `test/integration/block-display-modal.test.js`
 - `test/integration/block-palette.test.js`
 - `test/integration/debug_defaults.test.js`
+- `test/integration/dncl-mode-validation.test.js`
 - `test/integration/feedback-link.test.js`
 - `test/integration/ruby-editor-actions.test.js`
 - `test/integration/ruby-module.test.js`
diff --git a/.claude/rules/scratch-gui/testing.md b/.claude/rules/scratch-gui/testing.md
index 3bc1ef387d0..fd507b87574 100644
--- a/.claude/rules/scratch-gui/testing.md
+++ b/.claude/rules/scratch-gui/testing.md
@@ -99,6 +99,9 @@ describe('motion converter', () => {
 
 ## Integration Test Development Workflow
 
+**重要**: Integration tests では `data-testid` を優先的に使用する。
+詳細は `.claude/rules/scratch-gui/e2e-test.md` を参照。
+
 1. **Build the application**:
    ```bash
    docker compose run --rm app bash -c "cd /app/packages/scratch-gui && npm run build:dev"
diff --git a/.claude/rules/scratch-vm/development.md b/.claude/rules/scratch-vm/development.md
index a86556c1215..f0efcc0dc40 100644
--- a/.claude/rules/scratch-vm/development.md
+++ b/.claude/rules/scratch-vm/development.md
@@ -203,23 +203,10 @@ The mesh v2 extension uses AWS AppSync for real-time collaboration:
 
 ## Smalruby Marker Blocks
 
-Smalruby のカスタムコードは upstream ファイルの中に **マーカーコメント** で囲んで配置する。
-upstream merge 時にコンフリクトを解決しやすくするための仕組み。
+マーカーの書式・ルールは `.claude/rules/code-style.md` の「Smalruby Marker Comments」を参照。
 
-### マーカーの書式
-
-```javascript
-// === Smalruby: Start of <機能名> ===
-// ... Smalruby 固有のコード ...
-// === Smalruby: End of <機能名> ===
-```
-
-### ルール
-
-1. **upstream ファイルに Smalruby コードを追加するときは必ずマーカーで囲む**
-2. **マーカー内のコードだけを変更する** — マーカー外は upstream の管轄
-3. **新しいマーカーを追加したら、このセクションに記載する**
-4. **マーカーを削除する場合は、このセクションからも削除する**
+**重要**: Smalruby 固有ファイル（`smalruby-prettier-files.md` に記載されたファイル）にはマーカー不要。
+このセクションに記載するのは **upstream ファイルに埋め込んだマーカーのみ**。
 
 ### 現在のマーカー一覧
 
diff --git a/packages/scratch-gui/.prettierignore b/packages/scratch-gui/.prettierignore
index 355f8cd0c17..fcd3de8668a 100644
--- a/packages/scratch-gui/.prettierignore
+++ b/packages/scratch-gui/.prettierignore
@@ -172,6 +172,7 @@ test/integration/*
 !test/integration/block-display-modal.test.js
 !test/integration/block-palette.test.js
 !test/integration/debug_defaults.test.js
+!test/integration/dncl-mode-validation.test.js
 !test/integration/feedback-link.test.js
 !test/integration/ruby-editor-actions.test.js
 !test/integration/ruby-module.test.js
diff --git a/packages/scratch-gui/src/components/extension-button/extension-button.css b/packages/scratch-gui/src/components/extension-button/extension-button.css
index c0a4af961a4..3fd14369d45 100644
--- a/packages/scratch-gui/src/components/extension-button/extension-button.css
+++ b/packages/scratch-gui/src/components/extension-button/extension-button.css
@@ -42,6 +42,13 @@ $fade-out-distance: 15px;
     outline: revert;
 }
 
+/* === Smalruby: Start of DNCL extension disabled === */
+.extension-button-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+/* === Smalruby: End of DNCL extension disabled === */
+
 .extension-button-icon {
     width: 1.75rem;
     height: 1.75rem;
diff --git a/packages/scratch-gui/src/components/extension-button/extension-button.jsx b/packages/scratch-gui/src/components/extension-button/extension-button.jsx
index ce7f3b77bc1..0293bdf73da 100644
--- a/packages/scratch-gui/src/components/extension-button/extension-button.jsx
+++ b/packages/scratch-gui/src/components/extension-button/extension-button.jsx
@@ -14,28 +14,46 @@ const messages = defineMessages({
         id: 'gui.gui.addExtension',
         description: 'Button to add an extension in the target pane',
         defaultMessage: 'Add Extension'
+    },
+    // === Smalruby: Start of DNCL extension alert ===
+    dnclExtensionDisabled: {
+        id: 'gui.extensionButton.dnclExtensionDisabled',
+        description: 'Alert message when extension button is clicked in DNCL mode',
+        defaultMessage: 'Extensions are not available in Japanese mode.'
     }
+    // === Smalruby: End of DNCL extension alert ===
 });
 
 const ExtensionButton = props => {
     const {
         intl,
+        dnclMode,
         onExtensionButtonClick
     } = props;
     const {captureFocus} = useContext(ModalFocusContext);
 
     const handleExtensionButtonClick = useCallback(() => {
+        // === Smalruby: Start of DNCL extension alert ===
+        if (dnclMode) {
+            window.alert(intl.formatMessage(messages.dnclExtensionDisabled)); // eslint-disable-line no-alert
+            return;
+        }
+        // === Smalruby: End of DNCL extension alert ===
         captureFocus();
         onExtensionButtonClick?.();
-    }, [captureFocus, onExtensionButtonClick]);
+    }, [captureFocus, onExtensionButtonClick, dnclMode, intl]);
 
     return (
         <Box className={styles.extensionButtonContainer}>
             <button
-                className={classNames(styles.extensionButton)}
+                className={classNames(
+                    styles.extensionButton,
+                    {[styles.extensionButtonDisabled]: dnclMode}
+                )}
                 title={intl.formatMessage(messages.addExtension)}
                 onClick={handleExtensionButtonClick}
                 aria-label={intl.formatMessage(messages.addExtension)}
+                data-testid="extension-button"
             >
                 <img
                     className={styles.extensionButtonIcon}
@@ -48,6 +66,7 @@ const ExtensionButton = props => {
 };
 
 ExtensionButton.propTypes = {
+    dnclMode: PropTypes.bool,
     intl: intlShape.isRequired,
     onExtensionButtonClick: PropTypes.func
 };
diff --git a/packages/scratch-gui/src/components/gui/gui.jsx b/packages/scratch-gui/src/components/gui/gui.jsx
index 73d53a62714..440255d90e2 100644
--- a/packages/scratch-gui/src/components/gui/gui.jsx
+++ b/packages/scratch-gui/src/components/gui/gui.jsx
@@ -133,6 +133,7 @@ const GUIComponent = props => {
         blockDisplayModalVisible,
         blocksId,
         blocksTabVisible,
+        dnclMode, // === Smalruby: DNCL block filtering ===
         cardsVisible,
         canChangeLanguage,
         canChangeColorMode,
@@ -594,10 +595,13 @@ const GUIComponent = props => {
                                             colorMode={colorMode}
                                         />
                                     </Box>
+                                    {/* === Smalruby: Start of DNCL extension button === */}
                                     <ExtensionsButton
                                         intl={intl}
+                                        dnclMode={dnclMode}
                                         onExtensionButtonClick={onExtensionButtonClick}
                                     />
+                                    {/* === Smalruby: End of DNCL extension button === */}
                                     <Box className={styles.watermark}>
                                         <Watermark />
                                     </Box>
@@ -697,6 +701,7 @@ GUIComponent.propTypes = {
     basePath: PropTypes.string,
     blockDisplayModalVisible: PropTypes.bool,
     blocksTabVisible: PropTypes.bool,
+    dnclMode: PropTypes.bool, // === Smalruby: DNCL block filtering ===
     blocksId: PropTypes.string,
     canChangeLanguage: PropTypes.bool,
     canChangeColorMode: PropTypes.bool,
diff --git a/packages/scratch-gui/src/components/ruby-toolbar/ruby-toolbar.jsx b/packages/scratch-gui/src/components/ruby-toolbar/ruby-toolbar.jsx
index 3e718dec522..b5587597479 100644
--- a/packages/scratch-gui/src/components/ruby-toolbar/ruby-toolbar.jsx
+++ b/packages/scratch-gui/src/components/ruby-toolbar/ruby-toolbar.jsx
@@ -15,6 +15,7 @@ import iconRedo from './icon--redo.svg';
 import iconDownload from './icon--download.svg';
 import iconAutoCorrect from './icon--auto-correct.svg';
 import iconRubytee from './icon--rubytee.svg';
+import Spinner from '../spinner/spinner.jsx';
 
 const RubyToolbar = props => {
     const intl = useIntl();
@@ -136,6 +137,7 @@ const RubyToolbar = props => {
             <div className={`${styles.toolbarPart} ${styles.modDashedBorder}`}>
                 <button
                     className={styles.iconButton}
+                    data-testid="ruby-toolbar-execute"
                     onClick={handleExecuteLine}
                     disabled={!props.editorRef}
                     aria-label={intl.formatMessage(executeMessage)}
@@ -153,6 +155,7 @@ const RubyToolbar = props => {
                 <div className={styles.buttonGroup}>
                     <button
                         className={styles.iconButton}
+                        data-testid="ruby-toolbar-undo"
                         onClick={handleUndo}
                         disabled={!props.editorRef || !props.canUndo}
                         aria-label={intl.formatMessage(messages.undo)}
@@ -165,6 +168,7 @@ const RubyToolbar = props => {
                     </button>
                     <button
                         className={styles.iconButton}
+                        data-testid="ruby-toolbar-redo"
                         onClick={handleRedo}
                         disabled={!props.editorRef || !props.canRedo}
                         aria-label={intl.formatMessage(messages.redo)}
@@ -178,6 +182,7 @@ const RubyToolbar = props => {
                 </div>
                 <button
                     className={styles.iconButton}
+                    data-testid="ruby-toolbar-search"
                     onClick={handleSearch}
                     disabled={!props.editorRef}
                     aria-label={intl.formatMessage(messages.search)}
@@ -196,6 +201,7 @@ const RubyToolbar = props => {
                     className={`${styles.autoCorrectButton} ${
                         props.autoCorrectEnabled ? styles.autoCorrectButtonActive : ''
                     }`}
+                    data-testid="ruby-toolbar-auto-correct"
                     onClick={handleToggleAutoCorrect}
                     aria-label={intl.formatMessage(
                         props.autoCorrectEnabled ? messages.autoCorrectOn : messages.autoCorrectOff
@@ -225,6 +231,7 @@ const RubyToolbar = props => {
                 {props.onOpenRubyteeModal && (
                     <button
                         className={styles.iconButton}
+                        data-testid="ruby-toolbar-rubytee"
                         onClick={props.dnclMode ? null : props.onOpenRubyteeModal}
                         disabled={props.dnclMode}
                         aria-label={intl.formatMessage(messages.aiAssistant)}
@@ -246,6 +253,8 @@ const RubyToolbar = props => {
                             !props.dnclMode && props.furiganaEnabled
                                 ? styles.modeToggleItemActive : ''
                         }`}
+                        data-testid="ruby-toolbar-mode-furigana"
+                        disabled={props.dnclValidating}
                         onClick={handleSelectFuriganaMode}
                         title={intl.formatMessage(messages.modeFurigana)}
                     >
@@ -263,6 +272,8 @@ const RubyToolbar = props => {
                             !props.dnclMode && !props.furiganaEnabled
                                 ? styles.modeToggleItemActive : ''
                         }`}
+                        data-testid="ruby-toolbar-mode-ruby"
+                        disabled={props.dnclValidating}
                         onClick={handleSelectRubyMode}
                         title={intl.formatMessage(messages.modeRuby)}
                     >
@@ -272,10 +283,16 @@ const RubyToolbar = props => {
                         className={`${styles.modeToggleItem} ${
                             props.dnclMode ? styles.modeToggleItemActive : ''
                         }`}
+                        data-testid="ruby-toolbar-mode-dncl"
+                        disabled={props.dnclValidating}
                         onClick={handleSelectDnclMode}
                         title={intl.formatMessage(messages.modeDncl)}
                     >
-                        {intl.formatMessage(messages.dnclLabel)}
+                        {props.dnclValidating ? (
+                            <Spinner small level="info" />
+                        ) : (
+                            intl.formatMessage(messages.dnclLabel)
+                        )}
                     </button>
                 </div>
             </div>
@@ -289,6 +306,7 @@ const RubyToolbar = props => {
                 >
                     <button
                         className={styles.iconButton}
+                        data-testid="ruby-toolbar-more-menu"
                         onClick={handleToggleMoreMenu}
                         aria-label={intl.formatMessage(messages.moreOptions)}
                         title={intl.formatMessage(messages.moreOptions)}
@@ -299,6 +317,7 @@ const RubyToolbar = props => {
                         <div className={styles.moreMenu}>
                             <div
                                 className={styles.moreMenuItem}
+                                data-testid="ruby-toolbar-menu-download"
                                 onClick={handleDownload}
                             >
                                 <img
@@ -310,6 +329,7 @@ const RubyToolbar = props => {
                             </div>
                             <div
                                 className={styles.moreMenuItem}
+                                data-testid="ruby-toolbar-menu-insert-class"
                                 onClick={handleInsertClass}
                             >
                                 <span className={styles.moreMenuIcon}>{'{ }'}</span>
@@ -317,6 +337,7 @@ const RubyToolbar = props => {
                             </div>
                             <div
                                 className={styles.moreMenuItem}
+                                data-testid="ruby-toolbar-menu-preview"
                                 onClick={handlePreviewRubyScript}
                             >
                                 <span className={styles.moreMenuIcon}>{'</>'}</span>
@@ -324,6 +345,7 @@ const RubyToolbar = props => {
                             </div>
                             <div
                                 className={styles.moreMenuItem}
+                                data-testid="ruby-toolbar-menu-auto-correct-settings"
                                 onClick={handleOpenAutoCorrectSettings}
                             >
                                 <img
@@ -354,6 +376,7 @@ RubyToolbar.propTypes = {
     canUndo: PropTypes.bool,
     canRedo: PropTypes.bool,
     dnclMode: PropTypes.bool,
+    dnclValidating: PropTypes.bool,
     onToggleDnclMode: PropTypes.func,
     furiganaEnabled: PropTypes.bool,
     onToggleFurigana: PropTypes.func,
diff --git a/packages/scratch-gui/src/components/ruby-toolbar/target-selector.jsx b/packages/scratch-gui/src/components/ruby-toolbar/target-selector.jsx
index a1db16866d9..2a67b195cd5 100644
--- a/packages/scratch-gui/src/components/ruby-toolbar/target-selector.jsx
+++ b/packages/scratch-gui/src/components/ruby-toolbar/target-selector.jsx
@@ -166,6 +166,7 @@ const TargetSelector = props => {
         <>
             <button
                 className={styles.iconButton}
+                data-testid="ruby-toolbar-prev-sprite"
                 onClick={handlePrevSprite}
                 disabled={!canGoPrev()}
                 aria-label={intl.formatMessage(messages.prevSprite)}
@@ -178,6 +179,7 @@ const TargetSelector = props => {
             </button>
             <button
                 className={styles.iconButton}
+                data-testid="ruby-toolbar-next-sprite"
                 onClick={handleNextSprite}
                 disabled={!canGoNext()}
                 aria-label={intl.formatMessage(messages.nextSprite)}
@@ -191,6 +193,7 @@ const TargetSelector = props => {
             <div className={styles.commandWrapper}>
                 <input
                     className={styles.commandInput}
+                    data-testid="ruby-toolbar-sprite-search"
                     type="text"
                     value={commandValue}
                     onChange={handleCommandChange}
diff --git a/packages/scratch-gui/src/containers/blocks.jsx b/packages/scratch-gui/src/containers/blocks.jsx
index bce61c7f13e..4a16b90843d 100644
--- a/packages/scratch-gui/src/containers/blocks.jsx
+++ b/packages/scratch-gui/src/containers/blocks.jsx
@@ -44,6 +44,9 @@ import {togglePalette} from '../reducers/palette-visibility';
 import PaletteToggle from '../components/palette-toggle/palette-toggle.jsx';
 import BlocksScreenshotButton from '../components/blocks-screenshot-button/blocks-screenshot-button.jsx';
 import {downloadBlocksAsImage} from '../lib/blocks-screenshot';
+// === Smalruby: Start of DNCL block filtering ===
+import {DNCL_ALLOWED_BLOCKS} from '../lib/dncl/dncl-block-filter';
+// === Smalruby: End of DNCL block filtering ===
 
 const addFunctionListener = (object, property, callback) => {
     const oldFn = object[property];
@@ -188,9 +191,10 @@ class Blocks extends React.Component {
             this.ScratchBlocks.hideChaff();
         }
 
-        // If selectedBlocks or tutorialAllowedBlocks changed, update toolbox
+        // If selectedBlocks, tutorialAllowedBlocks, or dnclMode changed, update toolbox
         if (this.props.selectedBlocks !== prevProps.selectedBlocks ||
-            this.props.tutorialAllowedBlocks !== prevProps.tutorialAllowedBlocks) {
+            this.props.tutorialAllowedBlocks !== prevProps.tutorialAllowedBlocks ||
+            this.props.dnclMode !== prevProps.dnclMode) { // === Smalruby: DNCL block filtering ===
             const toolboxXML = this.getToolboxXML();
             if (toolboxXML) {
                 this.props.updateToolboxState(toolboxXML);
@@ -479,8 +483,15 @@ class Blocks extends React.Component {
 
             let onlyBlocks;
 
+            // === Smalruby: Start of DNCL block filtering ===
+            // DNCL mode has the absolute highest priority for block filtering.
+            if (this.props.dnclMode) {
+                onlyBlocks = DNCL_ALLOWED_BLOCKS.join(',');
+            }
+            // === Smalruby: End of DNCL block filtering ===
+
             // tutorialAllowedBlocks has highest priority (active tutorial overrides stage comments and URL params)
-            if (this.props.tutorialAllowedBlocks) {
+            if (!onlyBlocks && this.props.tutorialAllowedBlocks) {
                 const allowedBlockIds = [];
                 Object.values(this.props.tutorialAllowedBlocks).forEach(categoryBlocks => {
                     allowedBlockIds.push(...categoryBlocks);
@@ -518,7 +529,8 @@ class Blocks extends React.Component {
                 targetSounds.length > 0 ? targetSounds[targetSounds.length - 1].name : '',
                 getColorsForMode(this.props.colorMode),
                 onlyBlocks,
-                !!onlyBlocks // isOnlyBlocksSpecified: true if onlyBlocks has a value
+                !!onlyBlocks, // isOnlyBlocksSpecified: true if onlyBlocks has a value
+                this.props.dnclMode // === Smalruby: hide extensions in DNCL mode ===
             );
         } catch {
             return null;
@@ -915,6 +927,7 @@ Blocks.propTypes = {
     }),
     stageSize: PropTypes.oneOf(Object.keys(STAGE_DISPLAY_SIZES)).isRequired,
     colorMode: PropTypes.oneOf(Object.keys(colorModeMap)),
+    dnclMode: PropTypes.bool, // === Smalruby: DNCL block filtering ===
     toolboxXML: PropTypes.string,
     updateMetrics: PropTypes.func,
     updateToolboxState: PropTypes.func,
@@ -960,6 +973,7 @@ const mapStateToProps = state => ({
     isRtl: state.locales.isRtl,
     locale: state.locales.locale,
     messages: state.locales.messages,
+    dnclMode: state.scratchGui.dnclMode.dnclMode, // === Smalruby: DNCL block filtering ===
     selectedBlocks: state.scratchGui.blockDisplay.selectedBlocks,
     tutorialAllowedBlocks: state.scratchGui.cards.tutorialAllowedBlocks,
     toolboxXML: state.scratchGui.toolbox.toolboxXML,
diff --git a/packages/scratch-gui/src/containers/gui.jsx b/packages/scratch-gui/src/containers/gui.jsx
index a569a1a40e7..5349afd56e3 100644
--- a/packages/scratch-gui/src/containers/gui.jsx
+++ b/packages/scratch-gui/src/containers/gui.jsx
@@ -297,6 +297,7 @@ const mapStateToProps = (state, ownProps) => {
         colorMode: state.scratchGui.settings.colorMode,
         theme: state.scratchGui.settings.theme,
         blockDisplayModalVisible: state.scratchGui.blockDisplay.modalVisible,
+        dnclMode: state.scratchGui.dnclMode.dnclMode, // === Smalruby: DNCL block filtering ===
         rubyCode: state.scratchGui.rubyCode,
         rubyVersion: state.scratchGui.settings.rubyVersion,
         vm: state.scratchGui.vm
diff --git a/packages/scratch-gui/src/containers/ruby-tab.jsx b/packages/scratch-gui/src/containers/ruby-tab.jsx
index 2564a431978..3a3d312815f 100644
--- a/packages/scratch-gui/src/containers/ruby-tab.jsx
+++ b/packages/scratch-gui/src/containers/ruby-tab.jsx
@@ -1,3 +1,4 @@
+// === Smalruby: This file is Smalruby-specific (Ruby tab with Monaco Editor, DNCL mode, furigana) ===
 import PropTypes from 'prop-types';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { injectIntl } from 'react-intl';
@@ -11,18 +12,14 @@ import RubyToolbar from '../components/ruby-toolbar/ruby-toolbar.jsx';
 import { autoCorrect, defaultSettings as defaultAutoCorrectSettings } from '../lib/auto-correct';
 import collectMetadata from '../lib/collect-metadata.js';
 import { DnclSourceMap } from '../lib/dncl/dncl-source-map';
-// === Smalruby: Start of DNCL mode imports ===
 import { dnclToRuby } from '../lib/dncl/dncl-to-ruby';
 import { rubyToDncl } from '../lib/dncl/ruby-to-dncl';
 import FuriganaAnnotator from '../lib/furigana-annotator';
 import { wrapCurrentCodeWithClass } from '../lib/insert-class';
 import intlShape from '../lib/intlShape.js';
-// === Smalruby: End of module editor update ===
-// === Smalruby: Start of module sync ===
 import { syncModules } from '../lib/module-sync';
 import { loadMonacoLocale } from '../lib/monaco-i18n-helper';
 import { getPrism, loadPrism } from '../lib/prism-parser';
-// === Smalruby: Start of module editor update ===
 import RubyGenerator from '../lib/ruby-generator';
 import { downloadRubyAsImage } from '../lib/ruby-screenshot';
 import { generatePreviewCode } from '../lib/ruby-script-preview';
@@ -53,7 +50,6 @@ import {
     AUTO_CORRECT_SETTINGS_KEY,
     DNCL_MODE_KEY,
 } from './ruby-tab/constants';
-// === Smalruby: End of DNCL mode imports ===
 import updateDebugGlobals from './ruby-tab/debug-globals';
 import {
     registerCustomPasteAction,
@@ -67,8 +63,6 @@ import {
     findExecutableLine,
 } from './ruby-tab/execution-highlighter';
 import FuriganaRenderer from './ruby-tab/furigana-renderer';
-// === Smalruby: End of module sync ===
-
 import QuickFixProvider from './ruby-tab/quick-fix-provider';
 import styles from './ruby-tab/ruby-tab.css';
 import { showBubble, dismissBubble, removeBubble } from './ruby-tab/visual-report-bubble';
@@ -133,20 +127,18 @@ const RubyTab = props => {
     void executingLine;
     const [canUndo, setCanUndo] = useState(false);
     const [canRedo, setCanRedo] = useState(false);
-    // === Smalruby: Start of furigana URL param override ===
     const [furiganaEnabled, setFuriganaEnabled] = useState(() => {
         const urlRubyMode = getUrlParams().rubyMode;
         if (urlRubyMode === 'furigana') return true;
         if (urlRubyMode === 'ruby' || urlRubyMode === 'dncl') return false;
         return loadBool(FURIGANA_ENABLED_KEY, true);
     });
-    // === Smalruby: End of furigana URL param override ===
     const [autoCorrectEnabled, setAutoCorrectEnabled] = useState(() => loadBool(AUTO_CORRECT_ENABLED_KEY, true));
     const [autoCorrectSettings, setAutoCorrectSettings] = useState(loadAutoCorrectSettings);
     const [showAutoCorrectModal, setShowAutoCorrectModal] = useState(false);
     const [showScriptPreview, setShowScriptPreview] = useState(false);
     const [previewCode, setPreviewCode] = useState('');
-    // === Smalruby: Start of DNCL mode state ===
+    const [dnclValidating, setDnclValidating] = useState(false);
     const [dnclMode, setDnclMode] = useState(() => {
         const urlRubyMode = getUrlParams().rubyMode;
         if (urlRubyMode === 'dncl') return true;
@@ -162,7 +154,6 @@ const RubyTab = props => {
     const dnclSourceMapRef = useRef(null);
     const dnclModeRef = useRef(dnclMode);
     dnclModeRef.current = dnclMode;
-    // === Smalruby: End of DNCL mode state ===
 
     // --- Instance refs ---
     const editorRef = useRef(null);
@@ -348,7 +339,6 @@ const RubyTab = props => {
 
     // --- Stable Editor callbacks ---
 
-    // === Smalruby: Start of DNCL-aware dispatch helper ===
     const dispatchCode = useCallback(code => {
         if (dnclModeRef.current) {
             setDnclDisplayCode(code);
@@ -364,7 +354,6 @@ const RubyTab = props => {
             onChangeRef.current(code);
         }
     }, []);
-    // === Smalruby: End of DNCL-aware dispatch helper ===
 
     const handleEditorChange = useCallback(
         value => {
@@ -557,24 +546,71 @@ const RubyTab = props => {
         [onShowAlert, updateRubyCodeErrorsState],
     ); // showErrors uses refs, safe in stale closure
 
-    // === Smalruby: Start of DNCL mode toggle ===
-    const handleToggleDnclMode = useCallback(() => {
+    const dnclValidationErrorMessage = intl.formatMessage({
+        id: 'gui.rubyTab.dnclValidationError',
+        defaultMessage:
+            'This code contains constructs not supported in Japanese mode.\nPlease use only supported instructions before switching modes.',
+    });
+
+    const handleToggleDnclMode = useCallback(async () => {
+        const enabling = !dnclModeRef.current;
+
+        // Clear any existing errors before mode switch attempt.
+        clearErrors();
+
+        // Validate before switching TO DNCL mode:
+        // Dry-run Ruby → DNCL → Ruby → Blocks to check for unsupported code.
+        if (enabling && editorRef.current && monacoRef.current) {
+            setDnclValidating(true);
+            try {
+                const currentRuby = editorRef.current.getModel().getValue();
+                const dnclResult = rubyToDncl(currentRuby);
+                const rubyResult = dnclToRuby(dnclResult.dncl);
+
+                // Check DNCL → Ruby conversion errors (e.g. @ or $ in DNCL)
+                if (rubyResult.errors && rubyResult.errors.length > 0) {
+                    const errors = rubyResult.errors.map(err => ({
+                        row: err.line - 1,
+                        column: err.column - 1,
+                        text: dnclValidationErrorMessage,
+                        type: 'error',
+                    }));
+                    showErrors(errors);
+                    return;
+                }
+
+                // Dry-run blocks conversion (no apply — no side effects)
+                const converter = await targetCodeToBlocks(vm, rubyCode.target, rubyResult.ruby, intl, {
+                    version: rubyVersion,
+                });
+                if (!converter.result) {
+                    const errors = converter.errors.map(err => ({
+                        ...err,
+                        text: dnclValidationErrorMessage,
+                    }));
+                    showErrors(errors);
+                    return;
+                }
+            } finally {
+                setDnclValidating(false);
+            }
+        }
+
         // Suppress handleEditorChange during mode switch to prevent a
         // re-render race: model.setValue triggers onChange synchronously,
         // which dispatches to Redux, causing a re-render where dnclMode
         // state hasn't committed yet — overwriting the editor content.
         isModeSwitchRef.current = true;
 
-        const enabled = !dnclModeRef.current;
-        dnclModeRef.current = enabled;
+        dnclModeRef.current = enabling; // eslint-disable-line require-atomic-updates
 
         if (typeof window !== 'undefined' && window.localStorage) {
-            window.localStorage.setItem(DNCL_MODE_KEY, enabled);
+            window.localStorage.setItem(DNCL_MODE_KEY, enabling);
         }
 
         if (editorRef.current && monacoRef.current) {
             const model = editorRef.current.getModel();
-            if (enabled) {
+            if (enabling) {
                 // Switching to DNCL: convert Ruby → DNCL
                 const currentRuby = model.getValue();
                 const result = rubyToDncl(currentRuby);
@@ -595,9 +631,8 @@ const RubyTab = props => {
         }
 
         isModeSwitchRef.current = false;
-        setDnclMode(enabled);
-    }, []);
-    // === Smalruby: End of DNCL mode toggle ===
+        setDnclMode(enabling);
+    }, [vm, rubyCode.target, intl, rubyVersion, dnclValidationErrorMessage]);
 
     const handleToggleFurigana = useCallback(() => {
         setFuriganaEnabled(prev => {
@@ -679,7 +714,6 @@ const RubyTab = props => {
             if (converter.result) {
                 converter.apply().then(async () => {
                     clearErrors();
-                    // === Smalruby: Start of module sync ===
                     if (rubyCode.target && String(newVersion) === '2') {
                         try {
                             await syncModules(vm, rubyCode.target, intl, newVersion);
@@ -688,7 +722,6 @@ const RubyTab = props => {
                             console.error('Module sync error:', e);
                         }
                     }
-                    // === Smalruby: End of module sync ===
                     updateRubyCodeTargetState(vm.editingTarget, newVersion);
                 });
             } else {
@@ -717,12 +750,10 @@ const RubyTab = props => {
 
             const code = rubyCode.code;
 
-            // === Smalruby: Start of DNCL mode execute all ===
             // In DNCL mode, execute all top-level scripts from top to bottom
             // instead of just the cursor line.
             const isDncl = dnclModeRef.current;
             const targetLine = isDncl ? 1 : findExecutableLine(code, lineNumber);
-            // === Smalruby: End of DNCL mode execute all ===
 
             if (!targetLine) {
                 // eslint-disable-next-line no-console
@@ -743,7 +774,6 @@ const RubyTab = props => {
             converter
                 .apply()
                 .then(() => {
-                    // === Smalruby: Start of update editor after execute ===
                     // Regenerate Ruby code from blocks so that auto-imported
                     // modules are reflected in the editor immediately.
                     // Using direct editor setValue because Redux prop-driven
@@ -755,7 +785,6 @@ const RubyTab = props => {
                         const cursorLine = editorRef.current.getPosition().lineNumber;
                         const cursorContent = editorRef.current.getModel().getLineContent(cursorLine).trim();
 
-                        // === Smalruby: Start of DNCL mode preserve display ===
                         if (dnclModeRef.current) {
                             // Convert regenerated Ruby back to DNCL for display
                             const dnclResult = rubyToDncl(regenerated);
@@ -764,7 +793,6 @@ const RubyTab = props => {
                         } else {
                             editorRef.current.setValue(regenerated);
                         }
-                        // === Smalruby: End of DNCL mode preserve display ===
 
                         // Restore cursor to matching line in regenerated code
                         if (typeof cursorContent === 'string' && cursorContent.length > 0) {
@@ -783,9 +811,7 @@ const RubyTab = props => {
                             }
                         }
                     }
-                    // === Smalruby: End of update editor after execute ===
 
-                    // === Smalruby: Start of DNCL mode execute all scripts ===
                     if (isDncl) {
                         // Execute all top-level scripts sequentially
                         const blocks = vm.editingTarget.blocks;
@@ -808,7 +834,6 @@ const RubyTab = props => {
                         }
                         return;
                     }
-                    // === Smalruby: End of DNCL mode execute all scripts ===
 
                     const blockId = converter.getBlockIdForLine(targetLine);
                     if (!blockId) {
@@ -922,7 +947,6 @@ const RubyTab = props => {
         }
     }, [furiganaEnabled]);
 
-    // === Smalruby: Start of DNCL code sync ===
     // When code changes from blocks tab (Ruby → DNCL display), sync DNCL display
     const rubyCodeStr = rubyCode.code;
     useEffect(() => {
@@ -937,7 +961,6 @@ const RubyTab = props => {
             setDnclDisplayCode(result.dncl);
         }
     }, [rubyCodeStr, dnclMode]);
-    // === Smalruby: End of DNCL code sync ===
 
     // componentDidUpdate equivalent
     const prevPropsRef = useRef(null);
@@ -1016,7 +1039,6 @@ const RubyTab = props => {
                         converter.apply().then(async () => {
                             modified = false;
                             clearErrors();
-                            // === Smalruby: Start of module sync ===
                             if (rubyCode.target && String(rubyVersion) === '2') {
                                 try {
                                     await syncModules(vm, rubyCode.target, intl, rubyVersion);
@@ -1025,7 +1047,6 @@ const RubyTab = props => {
                                     console.error('Module sync error:', e);
                                 }
                             }
-                            // === Smalruby: End of module sync ===
                             if (!modified) {
                                 const etChanged = editingTarget && editingTarget !== prev.editingTarget;
                                 if ((isVisible && !prev.isVisible) || etChanged) {
@@ -1049,7 +1070,32 @@ const RubyTab = props => {
         if (!modified) {
             const etChanged = editingTarget && editingTarget !== prev.editingTarget;
             if ((isVisible && !prev.isVisible) || etChanged) {
+                // When switching to Ruby tab in DNCL mode, temporarily fall
+                // back to furigana mode so blocks→Ruby generation works.
+                // After the code is ready, attempt DNCL switch automatically.
+                const wasDncl = isVisible && !prev.isVisible && dnclModeRef.current;
+                if (wasDncl) {
+                    dnclModeRef.current = false;
+                    setDnclMode(false);
+                    setFuriganaEnabled(true);
+                    if (typeof window !== 'undefined' && window.localStorage) {
+                        window.localStorage.setItem(DNCL_MODE_KEY, 'false');
+                        window.localStorage.setItem(FURIGANA_ENABLED_KEY, 'true');
+                    }
+                    if (editorRef.current && monacoRef.current) {
+                        monacoRef.current.editor.setModelLanguage(editorRef.current.getModel(), 'smalruby');
+                    }
+                }
                 updateRubyCodeTargetState(vm.editingTarget, rubyVersion);
+                // Schedule DNCL switch after React re-renders with the new
+                // Ruby code and the Monaco editor value prop is committed.
+                if (wasDncl) {
+                    requestAnimationFrame(() => {
+                        setTimeout(() => {
+                            handleToggleDnclMode();
+                        }, 0);
+                    });
+                }
             }
         }
 
@@ -1095,6 +1141,7 @@ const RubyTab = props => {
                     onPreviewRubyScript={handlePreviewRubyScript}
                     onOpenRubyteeModal={onOpenRubyteeModal}
                     dnclMode={dnclMode}
+                    dnclValidating={dnclValidating}
                     onToggleDnclMode={handleToggleDnclMode}
                 />
                 <div className={styles.editorWrapper}>
diff --git a/packages/scratch-gui/src/lib/make-toolbox-xml.js b/packages/scratch-gui/src/lib/make-toolbox-xml.js
index 8d5036cd556..08c40ee0836 100644
--- a/packages/scratch-gui/src/lib/make-toolbox-xml.js
+++ b/packages/scratch-gui/src/lib/make-toolbox-xml.js
@@ -892,12 +892,14 @@ const filterBlocks = function (categoryXML, allowedPatterns) {
  * @param {?object} colors - The colors for the color mode.
  * @param {?string} onlyBlocks - The only_blocks URL parameter for filtering blocks.
  * @param {?boolean} isOnlyBlocksSpecified - Whether the onlyBlocks parameter was explicitly specified.
+ * @param {?boolean} dnclMode - Whether DNCL (Japanese) mode is active. Hides extension categories.
  * @returns {string} - a ScratchBlocks-style XML document for the contents of the toolbox.
  */
 const makeToolboxXML = function (
     isInitialSetup, isStage = true, targetId, categoriesXML = [],
     costumeName = '', backdropName = '', soundName = '', colors = defaultColors,
-    onlyBlocks = null, isOnlyBlocksSpecified = false
+    onlyBlocks = null, isOnlyBlocksSpecified = false,
+    dnclMode = false // === Smalruby: hide extensions in DNCL mode ===
 ) {
     isStage = isInitialSetup || isStage;
     const gap = [categorySeparator];
@@ -979,10 +981,14 @@ const makeToolboxXML = function (
     addCategoryIfNotEmpty(variablesXML);
     addCategoryIfNotEmpty(myBlocksXML);
 
-    // Extension categories are always included (exception categories)
-    for (const extensionCategory of categoriesXML) {
-        addCategoryIfNotEmpty(extensionCategory.xml);
+    // Extension categories: included unless in DNCL mode
+    // === Smalruby: Start of DNCL hide extensions ===
+    if (!dnclMode) {
+        for (const extensionCategory of categoriesXML) {
+            addCategoryIfNotEmpty(extensionCategory.xml);
+        }
     }
+    // === Smalruby: End of DNCL hide extensions ===
 
     // Remove the last gap if it exists
     if (everything.length > 1 && everything[everything.length - 1] === gap[0]) {
diff --git a/packages/scratch-gui/src/locales/en.js b/packages/scratch-gui/src/locales/en.js
index e194ee2cbe4..41498a1e156 100644
--- a/packages/scratch-gui/src/locales/en.js
+++ b/packages/scratch-gui/src/locales/en.js
@@ -422,4 +422,7 @@ export default {
         'A new version of Smalruby is available. Press "OK" to update now, or "Cancel" to update later.',
     'gui.menuBar.tutorialTooltip': 'Try Ruby!',
     'gui.aria.clearButton': 'Clear',
+    'gui.extensionButton.dnclExtensionDisabled': 'Extensions are not available in Japanese mode.',
+    'gui.rubyTab.dnclValidationError':
+        'This code contains constructs not supported in Japanese mode.\nPlease use only supported instructions before switching modes.',
 };
diff --git a/packages/scratch-gui/src/locales/ja-Hira.js b/packages/scratch-gui/src/locales/ja-Hira.js
index 33f0c1ebea5..b41f747c4aa 100644
--- a/packages/scratch-gui/src/locales/ja-Hira.js
+++ b/packages/scratch-gui/src/locales/ja-Hira.js
@@ -715,4 +715,7 @@ export default {
         'あたらしいバージョンのスモウルビーがりようかのうです。いますぐこうしんするばあいは「OK」を、あとにするばあいは「キャンセル」をおしてください。',
     'gui.menuBar.tutorialTooltip': 'ルビーをためしてみよう!',
     'gui.aria.clearButton': 'クリア',
+    'gui.extensionButton.dnclExtensionDisabled': 'にほんごモードではかくちょうきのうはつかえません。',
+    'gui.rubyTab.dnclValidationError':
+        'にほんごモードではたいおうしていないきじゅつです。\nたいおうしているめいれいのみにしてから、モードきりかえをおこなってください。',
 };
diff --git a/packages/scratch-gui/src/locales/ja.js b/packages/scratch-gui/src/locales/ja.js
index 530c8f0813b..9e3eee8e707 100644
--- a/packages/scratch-gui/src/locales/ja.js
+++ b/packages/scratch-gui/src/locales/ja.js
@@ -699,4 +699,7 @@ export default {
         '新しいバージョンのスモウルビーが利用可能です。いますぐ更新する場合は「OK」を、あとにする場合は「キャンセル」を押してください。',
     'gui.menuBar.tutorialTooltip': 'ルビーを試してみよう!',
     'gui.aria.clearButton': 'クリア',
+    'gui.extensionButton.dnclExtensionDisabled': '日本語モードでは拡張機能は使えません。',
+    'gui.rubyTab.dnclValidationError':
+        '日本語モードでは対応していない記述です。\n対応している命令のみにしてから、モード切り替えを行ってください。',
 };
diff --git a/packages/scratch-gui/test/integration/dncl-mode-validation.test.js b/packages/scratch-gui/test/integration/dncl-mode-validation.test.js
new file mode 100644
index 00000000000..f1b8778f696
--- /dev/null
+++ b/packages/scratch-gui/test/integration/dncl-mode-validation.test.js
@@ -0,0 +1,136 @@
+import path from 'path';
+import RubyHelper from '../helpers/ruby-helper';
+import SeleniumHelper from '../helpers/selenium-helper';
+
+const seleniumHelper = new SeleniumHelper();
+const {
+    /* eslint-disable no-unused-vars */
+    clickText,
+    clickButton,
+    clickXpath,
+    findByText,
+    findByXpath,
+    getDriver,
+    getLogs,
+    loadUri,
+    waitForLoadingFinished,
+    notExistsByXpath,
+    scope,
+    /* eslint-enable no-unused-vars */
+} = seleniumHelper;
+const rubyHelper = new RubyHelper(seleniumHelper);
+const { fillInRubyProgram, getErrors } = rubyHelper;
+
+const uri = path.resolve(__dirname, '../../build/index.html');
+
+const clickByTestId = (d, testId) => d.executeScript(`document.querySelector('[data-testid="${testId}"]').click()`);
+
+const isActiveByTestId = (d, testId) =>
+    d.executeScript(
+        `return document.querySelector('[data-testid="${testId}"]')` + `?.className?.includes('Active') ?? false`,
+    );
+
+const waitForEditorValue = (d, expected) =>
+    d.wait(
+        async () => {
+            const value = await d.executeScript('return window.monacoEditor && window.monacoEditor.getValue()');
+            return value && value.includes(expected);
+        },
+        10000,
+        `Editor value did not contain "${expected}"`,
+    );
+
+const waitForActiveState = (d, testId, expected) =>
+    d.wait(
+        () =>
+            d.executeScript(
+                `return (document.querySelector('[data-testid="${testId}"]')` +
+                    `?.className?.includes('Active') ?? false) === ${expected}`,
+            ),
+        10000,
+        `Button ${testId} Active state did not become ${expected}`,
+    );
+
+/**
+ * Load the editor in Ruby mode (not DNCL), clearing any localStorage state.
+ * @param {import('selenium-webdriver').WebDriver} d - WebDriver instance.
+ */
+const loadInRubyMode = async d => {
+    // Use rubyMode=ruby to ensure we start in Ruby mode, regardless of localStorage
+    await loadUri(`${uri}?rubyMode=ruby`);
+    await clickText('Ruby', '*[@role="tab"]');
+};
+
+let driver;
+
+describe('DNCL mode validation on switch', () => {
+    beforeAll(() => {
+        driver = getDriver();
+    });
+
+    afterAll(async () => {
+        await driver.quit();
+    });
+
+    test('valid code allows DNCL switch', async () => {
+        await loadInRubyMode(driver);
+        await fillInRubyProgram('@x = 10\nsay("hello", 1)\n');
+        await waitForEditorValue(driver, '@x = 10');
+
+        await clickByTestId(driver, 'ruby-toolbar-mode-dncl');
+        await waitForActiveState(driver, 'ruby-toolbar-mode-dncl', true);
+    });
+
+    test('invalid code blocks DNCL switch and shows errors', async () => {
+        await loadInRubyMode(driver);
+        await fillInRubyProgram('move(10)\n');
+        await waitForEditorValue(driver, 'move(10)');
+
+        await clickByTestId(driver, 'ruby-toolbar-mode-dncl');
+        // Validation is async; wait for it to complete and errors to appear
+        await driver.wait(
+            async () => {
+                const errors = await getErrors();
+                return errors.length > 0;
+            },
+            15000,
+            'DNCL validation errors did not appear',
+        );
+
+        expect(await isActiveByTestId(driver, 'ruby-toolbar-mode-dncl')).toBe(false);
+
+        const errors = await getErrors();
+        // Message is locale-dependent; check for either Japanese or English
+        expect(
+            errors[0].message.includes('日本語モードでは対応していない記述です') ||
+                errors[0].message.includes('not supported in Japanese mode'),
+        ).toBe(true);
+    });
+
+    test('when_flag_clicked blocks DNCL switch', async () => {
+        await loadInRubyMode(driver);
+        await fillInRubyProgram('when_flag_clicked do\n  say("hello", 1)\nend\n');
+        await waitForEditorValue(driver, 'when_flag_clicked');
+
+        await clickByTestId(driver, 'ruby-toolbar-mode-dncl');
+        await driver.wait(
+            async () => {
+                const errors = await getErrors();
+                return errors.length > 0;
+            },
+            15000,
+            'DNCL validation errors did not appear',
+        );
+
+        expect(await isActiveByTestId(driver, 'ruby-toolbar-mode-dncl')).toBe(false);
+    });
+
+    test('DNCL to Ruby switch is not affected', async () => {
+        await loadUri(`${uri}?rubyMode=dncl`);
+        await clickText('Ruby', '*[@role="tab"]');
+        await waitForActiveState(driver, 'ruby-toolbar-mode-dncl', true);
+
+        await clickByTestId(driver, 'ruby-toolbar-mode-ruby');
+        await waitForActiveState(driver, 'ruby-toolbar-mode-dncl', false);
+    });
+});
diff --git a/packages/scratch-gui/test/unit/lib/dncl/dncl-validation.test.js b/packages/scratch-gui/test/unit/lib/dncl/dncl-validation.test.js
new file mode 100644
index 00000000000..bcf7afef6f8
--- /dev/null
+++ b/packages/scratch-gui/test/unit/lib/dncl/dncl-validation.test.js
@@ -0,0 +1,143 @@
+/**
+ * Tests for DNCL mode switch validation.
+ *
+ * When switching from Ruby to DNCL mode, the editor performs a dry-run:
+ * Ruby → DNCL → Ruby → Blocks. If the blocks conversion fails, the switch
+ * is blocked and a localized error message is shown.
+ */
+import { rubyToDncl } from '../../../../src/lib/dncl/ruby-to-dncl';
+import { dnclToRuby } from '../../../../src/lib/dncl/dncl-to-ruby';
+import {
+    makeSpriteTarget,
+    makeConverter,
+} from '../../helpers/ruby-roundtrip-helper';
+
+// The localized message used in the actual component (ja locale).
+const DNCL_VALIDATION_MESSAGE =
+    '日本語モードでは対応していない記述です。\n対応している命令のみにしてから、モード切り替えを行ってください。';
+
+/**
+ * Simulate the DNCL mode switch validation pipeline:
+ * 1. Ruby → DNCL
+ * 2. DNCL → Ruby
+ * 3. Ruby → Blocks (dry run, no apply)
+ *
+ * Returns { valid, errors } where errors use a fixed message.
+ */
+const validateForDncl = async (code) => {
+    const dnclResult = rubyToDncl(code);
+    const rubyResult = dnclToRuby(dnclResult.dncl);
+
+    if (rubyResult.errors && rubyResult.errors.length > 0) {
+        return {
+            valid: false,
+            errors: rubyResult.errors.map((err) => ({
+                row: err.line - 1,
+                column: err.column - 1,
+                text: DNCL_VALIDATION_MESSAGE,
+                type: 'error',
+            })),
+        };
+    }
+
+    const { target, runtime } = makeSpriteTarget();
+    const converter = makeConverter(target, runtime, { version: '2' });
+    const result = await converter.targetCodeToBlocks(target, rubyResult.ruby);
+
+    if (!result) {
+        return {
+            valid: false,
+            errors: converter.errors.map((err) => ({
+                ...err,
+                text: DNCL_VALIDATION_MESSAGE,
+            })),
+        };
+    }
+
+    return { valid: true, errors: [] };
+};
+
+describe('DNCL mode switch validation', () => {
+    describe('valid code (should allow switch)', () => {
+        test('empty code', async () => {
+            const { valid } = await validateForDncl('');
+            expect(valid).toBe(true);
+        });
+
+        test('simple variable assignment and say', async () => {
+            const code = '@x = 10\nsay("hello", 1)\n';
+            const { valid, errors } = await validateForDncl(code);
+            expect(errors).toHaveLength(0);
+            expect(valid).toBe(true);
+        });
+
+        test('variable with if and say', async () => {
+            const code = [
+                '@x = 10',
+                'if @x > 5',
+                '  say("big", 1)',
+                'end',
+                '',
+            ].join('\n');
+            const { valid } = await validateForDncl(code);
+            expect(valid).toBe(true);
+        });
+    });
+
+    describe('invalid code (should block switch)', () => {
+        test('when_flag_clicked breaks in DNCL round-trip', async () => {
+            const code =
+                'when_flag_clicked do\n  say("hello", 1)\nend\n';
+            const { valid, errors } = await validateForDncl(code);
+            expect(valid).toBe(false);
+            expect(errors.length).toBeGreaterThan(0);
+        });
+
+        test('when_key_pressed is not supported in DNCL', async () => {
+            const code =
+                'when_key_pressed("a") do\n  say("hello", 1)\nend\n';
+            const { valid, errors } = await validateForDncl(code);
+            expect(valid).toBe(false);
+            expect(errors.length).toBeGreaterThan(0);
+        });
+
+        test('move is not supported in DNCL', async () => {
+            const code = 'move(10)\n';
+            const { valid, errors } = await validateForDncl(code);
+            expect(valid).toBe(false);
+            expect(errors.length).toBeGreaterThan(0);
+        });
+
+        test('turn_right is not supported in DNCL', async () => {
+            const code = 'turn_right(90)\n';
+            const { valid, errors } = await validateForDncl(code);
+            expect(valid).toBe(false);
+            expect(errors.length).toBeGreaterThan(0);
+        });
+
+        test('broadcast is not supported in DNCL', async () => {
+            const code = 'broadcast("message1")\n';
+            const { valid, errors } = await validateForDncl(code);
+            expect(valid).toBe(false);
+            expect(errors.length).toBeGreaterThan(0);
+        });
+
+        test('when_clicked is not supported in DNCL', async () => {
+            const code = 'when_clicked do\n  say("hello", 1)\nend\n';
+            const { valid, errors } = await validateForDncl(code);
+            expect(valid).toBe(false);
+            expect(errors.length).toBeGreaterThan(0);
+        });
+    });
+
+    describe('error message', () => {
+        test('errors use the localized validation message', async () => {
+            const code =
+                'when_key_pressed("a") do\n  say("hello", 1)\nend\n';
+            const { errors } = await validateForDncl(code);
+            for (const err of errors) {
+                expect(err.text).toBe(DNCL_VALIDATION_MESSAGE);
+            }
+        });
+    });
+});