feat(scratch-vm): 甲子園 実ゲームサーバー通信モード（RemoteClient）[Draft/最後にマージ]

.claude/rules/scratch-gui/smalruby-markers.md

@@ -111,6 +111,8 @@ upstream ファイルに追加した Smalruby 固有コードのマーカー一
 | `src/containers/blocks.jsx` | stale block delete event guard | scratch-blocks v2 の非同期イベント配送で、ワークスペースリロードを跨いで届いた stale な delete イベントが VM のスクリプトを消す問題のガード。`attachVM` で `vm.blockListener` を `createStaleBlockDeleteGuard` でラップ (issue #710)。import も含む |
 | `src/containers/blocks.jsx` | Ruby-converted toolbox update deferral | `onWorkspaceUpdate` の fromRuby 分岐の `updateToolbox()` を `Events.disable()` 窓の外 (finally 後) へ移動。窓内では flyout 再構築の create イベントが破棄され、新規変数が `runtime.monitorBlocks` / `flyoutBlocks` に登録されずモニタチェックボックスが無反応になる問題の修正 (issue #719)。フラグ宣言部と実行部の 2 箇所 |
 
+| `src/lib/vm-manager-hoc.jsx` | koshien remote options wiring | VM 初期化時に `wireKoshienRemoteOptions(vm)` を呼び、甲子園拡張機能が接続設定を読めるよう runtime に getter を差し込む (import + componentDidMount) |
+
 ## 関連ファイル
 
 マーカーで囲まれたコードが参照するファイル:

.claude/rules/scratch-gui/smalruby-prettier-files.md

@@ -24,6 +24,7 @@ upstream (Scratch) ファイルは対象外。
 - `src/components/blocks-screenshot-button/`
 - `src/components/google-drive-save-dialog/`
 - `src/components/koshien-test-modal/`
+- `src/components/koshien-settings-modal/`
 - `src/components/mesh-self-sensor-notice/`
 - `src/components/mobile-bottom-tabs/`
 - `src/components/mobile-drawer/`
@@ -124,6 +125,7 @@ upstream (Scratch) ファイルは対象外。
 - `src/lib/google-script-loader.js`
 - `src/lib/insert-class.js`
 - `src/lib/join-code-history.js`
+- `src/lib/koshien-connection.js`
 - `src/lib/log-suppression.js`
 - `src/lib/mesh-v2-classroom-binding.jsx`
 - `src/lib/mesh-v2-sensor-collision.js`
@@ -219,6 +221,7 @@ upstream (Scratch) ファイルは対象外。
 - `test/integration/workspace-glow-regression.test.js`
 - `test/unit/components/action-menu.test.jsx`
 - `test/unit/components/bug-report-consent.test.jsx`
+- `test/unit/components/koshien-settings-modal.test.jsx`
 - `test/unit/components/dncl-mode-notice.test.jsx`
 - `test/unit/components/extension-button-dncl.test.jsx`
 - `test/unit/components/connected-step.test.jsx`
@@ -273,6 +276,7 @@ upstream (Scratch) ファイルは対象外。
 - `test/unit/lib/use-is-narrow-screen.test.js`
 - `test/unit/lib/insert-class.test.js`
 - `test/unit/lib/join-code-history.test.js`
+- `test/unit/lib/koshien-connection.test.js`
 - `test/unit/lib/layout-constants.test.js`
 - `test/unit/lib/legacy-storage.test.js`
 - `test/unit/lib/mesh-v2-classroom-binding.test.js`

.claude/rules/scratch-vm/smalruby-prettier-files.md

@@ -39,6 +39,10 @@ upstream (Scratch) ファイルは対象外。
 - `test/unit/blocks_move_top_level_shadow.js`
 - `test/unit/blocks_operators_regex.js`
 - `test/unit/extension_koshien.js`
+- `test/unit/koshien_golden_contract.js`
+- `test/unit/koshien_remote_client.js`
+- `test/unit/koshien_remote_client_http.js`
+- `test/fixtures/koshien/mock-server.js`
 - `test/unit/extension_mesh_v2_delta_repro.js`
 - `test/unit/extension_mesh_v2_delta.js`
 - `test/unit/extension_mesh_v2_domain.js`

packages/scratch-gui/.prettierignore

@@ -41,6 +41,7 @@ src/components/*
 !src/components/google-drive-save-dialog/
 !src/components/dncl-mode-notice/
 !src/components/koshien-test-modal/
+!src/components/koshien-settings-modal/
 !src/components/mesh-self-sensor-notice/
 !src/components/mobile-bottom-tabs/
 !src/components/mobile-drawer/
@@ -130,6 +131,7 @@ src/lib/*
 !src/lib/auto-correct.js
 !src/lib/backpack-mesh-v1-migration.js
 !src/lib/bug-report-api.js
+!src/lib/koshien-connection.js
 !src/lib/deck-setup.js
 !src/lib/classroom-api.js
 !src/lib/classroom-kick-request-storage.js
@@ -282,6 +284,7 @@ test/unit/*
 test/unit/components/*
 !test/unit/components/action-menu.test.jsx
 !test/unit/components/bug-report-consent.test.jsx
+!test/unit/components/koshien-settings-modal.test.jsx
 !test/unit/components/dncl-mode-notice.test.jsx
 !test/unit/components/extension-button-dncl.test.jsx
 !test/unit/components/connected-step.test.jsx
@@ -332,6 +335,7 @@ test/unit/lib/*
 !test/unit/lib/backpack-mesh-v1-migration.test.js
 !test/unit/lib/block-display-initialization.test.js
 !test/unit/lib/bug-report-api.test.js
+!test/unit/lib/koshien-connection.test.js
 !test/unit/lib/blockly-private-api.test.js
 !test/unit/lib/blocks-gesture-recovery.test.js
 !test/unit/lib/classroom-api.test.js

packages/scratch-gui/src/components/gui/gui.jsx

@@ -58,6 +58,7 @@ import WelcomeModalHOC from '../../containers/welcome-modal-hoc.jsx';
 // === Smalruby: End of welcome modal ===
 import URLLoaderModal from '../url-loader-modal/url-loader-modal.jsx';
 import KoshienTestModal from '../koshien-test-modal/koshien-test-modal.jsx';
+import KoshienSettingsModal from '../koshien-settings-modal/koshien-settings-modal.jsx';
 import RubyTab from '../../containers/ruby-tab.jsx';
 
 import layout, {STAGE_DISPLAY_SIZES, STAGE_SIZE_MODES} from '../../lib/layout-constants';
@@ -211,6 +212,7 @@ const GUIComponent = props => {
         isTelemetryEnabled,
         isTotallyNormal,
         koshienTestModalVisible,
+        koshienSettingsModalVisible,
         loading,
         logo,
         manuallySaveThumbnails,
@@ -242,6 +244,7 @@ const GUIComponent = props => {
         onRequestCloseCostumeLibrary,
         onRequestCloseDebugModal,
         onRequestCloseKoshienTestModal,
+        onRequestCloseKoshienSettingsModal,
         onRequestCloseTelemetryModal,
         onRequestCloseTipsLibrary,
         onRequestCloseUrlLoaderModal,
@@ -384,6 +387,12 @@ const GUIComponent = props => {
                         onRequestClose={onRequestCloseKoshienTestModal}
                     />
                 ) : null}
+                {koshienSettingsModalVisible ? (
+                    <KoshienSettingsModal
+                        vm={vm}
+                        onRequestClose={onRequestCloseKoshienSettingsModal}
+                    />
+                ) : null}
             </StageWrapper>
         ) : (
             <ModalFocusProvider>
@@ -414,6 +423,12 @@ const GUIComponent = props => {
                             onRequestClose={onRequestCloseKoshienTestModal}
                         />
                     ) : null}
+                    {koshienSettingsModalVisible ? (
+                        <KoshienSettingsModal
+                            vm={vm}
+                            onRequestClose={onRequestCloseKoshienSettingsModal}
+                        />
+                    ) : null}
                     {loading ? (
                         <Loader />
                     ) : null}
@@ -876,6 +891,7 @@ GUIComponent.propTypes = {
     isShared: PropTypes.bool,
     isTotallyNormal: PropTypes.bool,
     koshienTestModalVisible: PropTypes.bool,
+    koshienSettingsModalVisible: PropTypes.bool,
     loading: PropTypes.bool,
     logo: PropTypes.string,
     manuallySaveThumbnails: PropTypes.bool,
@@ -900,6 +916,7 @@ GUIComponent.propTypes = {
     onRequestCloseCostumeLibrary: PropTypes.func,
     onRequestCloseDebugModal: PropTypes.func,
     onRequestCloseKoshienTestModal: PropTypes.func,
+    onRequestCloseKoshienSettingsModal: PropTypes.func,
     onRequestCloseTelemetryModal: PropTypes.func,
     onRequestCloseTipsLibrary: PropTypes.func,
     onRequestCloseUrlLoaderModal: PropTypes.func,

packages/scratch-gui/src/components/koshien-settings-modal/koshien-settings-modal.css

@@ -0,0 +1,82 @@
+@import "../../css/colors.css";
+
+.modal-content {
+    width: 400px;
+    max-width: 90vw;
+}
+
+.header {
+    background-color: $looks-secondary;
+}
+
+/* 本文には不透明な背景色を設定する（modals ルール: 設定しないと青いオーバーレイが透ける） */
+.body {
+    background-color: $ui-white;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.label {
+    font-size: 0.875rem;
+    font-weight: bold;
+    color: $text-primary;
+}
+
+.input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0.5rem;
+    border: 1px solid $ui-black-transparent;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+}
+
+.button-row {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.test-button,
+.save-button {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.25rem;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.test-button {
+    background-color: $ui-secondary;
+    color: $text-primary;
+}
+
+.test-button:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+.save-button {
+    background-color: $motion-primary;
+    color: $ui-white;
+}
+
+.result-ok {
+    color: $data-primary;
+    font-size: 0.875rem;
+}
+
+.result-ng {
+    color: $error-primary;
+    font-size: 0.875rem;
+    word-break: break-all;
+}