@elice/material-exercise 1.260429.0-improvetimerpopoverui.0 → 1.260430.0

package/es/components/material-exercise/context/recoil.js

@@ -648,107 +648,6 @@ var exerciseMultilangEnvironmentState = atomFamily({
   }
 });
 //
-// =============== arduino ===============
-//
-var ARDUINO_ACCOUNT_PREFERENCE_KEY = 'material.exercise.arduino.preference';
-var DEFAULT_ARDUINO_PREFERENCE = {
-  baudRate: 9600,
-  port: ''
-};
-/**
- * Arduino preference.
- */
-var exerciseArduinoPreferenceState = atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/Preference"),
-  "default": DEFAULT_ARDUINO_PREFERENCE,
-  effects: [function (_ref26) {
-    var trigger = _ref26.trigger,
-      setSelf = _ref26.setSelf,
-      onSet = _ref26.onSet;
-    var get = /*#__PURE__*/function () {
-      var _ref27 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
-        var _t8;
-        return _regenerator().w(function (_context1) {
-          while (1) switch (_context1.n) {
-            case 0:
-              _t8 = setSelf;
-              _context1.n = 1;
-              return getGlobalAccountPreferenceGet({
-                pkey: ARDUINO_ACCOUNT_PREFERENCE_KEY
-              }).then(function (res) {
-                return Object.assign(Object.assign({}, DEFAULT_ARDUINO_PREFERENCE), res.pvalue);
-              })["catch"](function () {
-                return DEFAULT_ARDUINO_PREFERENCE;
-              });
-            case 1:
-              _t8(_context1.v);
-            case 2:
-              return _context1.a(2);
-          }
-        }, _callee1);
-      }));
-      return function get() {
-        return _ref27.apply(this, arguments);
-      };
-    }();
-    if (trigger === 'get') {
-      void get();
-    }
-    onSet(function (newPreference, prevPreference, isReset) {
-      if (!isEqual(newPreference, prevPreference) && !isReset) {
-        void postGlobalAccountPreferenceEdit({
-          pkey: ARDUINO_ACCOUNT_PREFERENCE_KEY,
-          pvalue: Object.assign(Object.assign({}, DEFAULT_ARDUINO_PREFERENCE), newPreference)
-        });
-      }
-    });
-  }]
-});
-/**
- * Arduino ports.
- */
-var exerciseArduinoPortsState = atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/Ports"),
-  "default": []
-});
-/**
- * Opened arduino port.
- */
-var exerciseArduinoOpenedPortNameState = atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/OpenedPortName"),
-  "default": null
-});
-/**
- * Arduino port open handler.
- */
-var exerciseArduinoOnSelectPortState = atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/OnSelectPort"),
-  "default": function _default(_) {
-    // do nothing.
-  }
-});
-/**
- * Arduino agent connection status.
- */
-var exerciseArduinoAgentConnectionState = atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/AgentConnection"),
-  "default": 'disconnected'
-});
-/**
- * Arduino upload progress.
- */
-var exerciseArduinoUploadProgressState = atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/UploadProgressState"),
-  "default": 'ready'
-});
-/**
- * Arduino agent modal open status.
- */
-var exerciseArduinoAgentModalState = atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/AgentModalState"),
-  "default": false
-});
-//
 // =============== others ===============
 //
 /**
@@ -808,4 +707,4 @@ var exerciseMonacoEditorApisState = atom({
   dangerouslyAllowMutability: true
 });
 
-export { exerciseActiveFilenameState, exerciseAibotInfoEnableState, exerciseArduinoAgentConnectionState, exerciseArduinoAgentModalState, exerciseArduinoOnSelectPortState, exerciseArduinoOpenedPortNameState, exerciseArduinoPortsState, exerciseArduinoPreferenceState, exerciseArduinoUploadProgressState, exerciseContainerSizeState, exerciseEditorPreferenceState, exerciseFileEditorCursorSelectionValueState, exerciseFileEditorCursorState, exerciseFileTabsOpenedState, exerciseFileTreeOpenedState, exerciseLectureState, exerciseMonacoEditorApisState, exerciseMultilangEnvironmentState, exerciseMultilangLanguagesState, exercisePreviewDisplayModeState, exercisePreviewTypeState, exerciseRightpaneActiveState, exerciseRoomState, exerciseRunnerRoomConnectionInfoState, exerciseRunnerRunTypeState, exerciseRunnerRunningState, exerciseRunnerStdioFilesState, exerciseRunnerSubmittingState, exerciseState, exerciseUserState, exerciseWebSocketTotalStatusQuery, exerciseWebsocketQuery, exerciseWebsocketStates };
+export { exerciseActiveFilenameState, exerciseAibotInfoEnableState, exerciseContainerSizeState, exerciseEditorPreferenceState, exerciseFileEditorCursorSelectionValueState, exerciseFileEditorCursorState, exerciseFileTabsOpenedState, exerciseFileTreeOpenedState, exerciseLectureState, exerciseMonacoEditorApisState, exerciseMultilangEnvironmentState, exerciseMultilangLanguagesState, exercisePreviewDisplayModeState, exercisePreviewTypeState, exerciseRightpaneActiveState, exerciseRoomState, exerciseRunnerRoomConnectionInfoState, exerciseRunnerRunTypeState, exerciseRunnerRunningState, exerciseRunnerStdioFilesState, exerciseRunnerSubmittingState, exerciseState, exerciseUserState, exerciseWebSocketTotalStatusQuery, exerciseWebsocketQuery, exerciseWebsocketStates };

package/es/components/material-exercise/context/recoilTypes.d.ts

@@ -76,13 +76,6 @@ export type AtomMultilangEnvironmentJson = MultilangEnvironmentJson | null;
  * - `MultilangLanguagesJson`: Ready.
  */
 export type AtomMultilangEnvironmentState = MultilangLanguagesJson | undefined | null;
-/**
- * Arduino preference.
- */
-export type AtomArduinoPreferenceState = Required<{
-    baudRate: number;
-    port: string;
-}>;
 /**
  *
  */

package/es/components/material-exercise/exercise-menu/ExerciseMenu.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import type { WithIntlComponentBuilderProps as EliceIntlProps } from '@elice/intl';
+import type React from 'react';
 declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<EliceIntlProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/es/components/material-exercise/exercise-menu/ExerciseMenu.js

@@ -1,38 +1,22 @@
 import _styled from '@emotion/styled/base';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { base } from '@elice/design-tokens';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
-import { enums } from '@elice/types';
-import { useRecoilValue } from 'recoil';
-import ExerciseMenuArduinoAgentModalButton from './ExerciseMenuArduinoAgentModalButton.js';
-import ExerciseMenuArduinoSettings from './ExerciseMenuArduinoSettings.js';
 import ExerciseMenuDropdown from './ExerciseMenuDropdown.js';
 import ExerciseMenuReset from './ExerciseMenuReset.js';
 import ExerciseMenuStdioFileBrowser from './ExerciseMenuStdioFileBrowser.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
-import { ExerciseContext } from '../context/context.js';
-import { exerciseState } from '../context/recoil.js';
 
 var StyledExerciseMenuWrapper = /*#__PURE__*/_styled("div", {
   target: "e16oipg60"
 })("display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;height:2.25rem;gap:0.5rem;background-color:", base.color.navy8, ";");
 var ExerciseMenu = function ExerciseMenu(_ref) {
   var __intl = _ref.__intl;
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var exercise = useRecoilValue(exerciseState(materialExerciseId));
-  var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino;
-  //
-  //
-  //
   return jsx(RawEliceIntlProvider, {
     value: __intl,
     children: jsxs(StyledExerciseMenuWrapper, {
-      children: [isArduinoExercise ? jsxs(Fragment, {
-        children: [jsx(ExerciseMenuArduinoAgentModalButton, {}), jsx(ExerciseMenuArduinoSettings, {})]
-      }) : jsx(ExerciseMenuStdioFileBrowser, {}), jsx(ExerciseMenuReset, {}), jsx(ExerciseMenuDropdown, {})]
+      children: [jsx(ExerciseMenuStdioFileBrowser, {}), jsx(ExerciseMenuReset, {}), jsx(ExerciseMenuDropdown, {})]
     })
   });
 };

package/es/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.js

@@ -68,7 +68,7 @@ var StyledFilePopoverBodyListItemContentImage = /*#__PURE__*/_styled("img", {
   styles: "width:100%;max-height:128px;object-fit:contain;cursor:zoom-in",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var StyledPreferenceBodyItem = /*#__PURE__*/_styled("div", {
+/*#__PURE__*/_styled("div", {
   target: "e8nx2or1"
 })("production" === "production" ? {
   name: "10vug81",
@@ -78,8 +78,8 @@ var StyledPreferenceBodyItem = /*#__PURE__*/_styled("div", {
   styles: "display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var StyledSelect = /*#__PURE__*/_styled(Select, {
+/*#__PURE__*/_styled(Select, {
   target: "e8nx2or0"
 })(">div{background:", base.color.navy8, "!important;border-color:", base.color.navy7, "!important;}select{padding:0!important;height:2rem!important;color:#fff!important;>option{background:", base.color.navy8, "!important;}}");
 
-export { StyledFilePopoverBody, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentFile, StyledFilePopoverBodyListItemContentImage, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverContent, StyledFilePopoverHeader, StyledMenuButtonFileCount, StyledPreferenceBodyItem, StyledSelect };
+export { StyledFilePopoverBody, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentFile, StyledFilePopoverBodyListItemContentImage, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverContent, StyledFilePopoverHeader, StyledMenuButtonFileCount };

package/es/components/material-exercise/exercise-menu/locales/en.json.js

@@ -1,3 +1,3 @@
-var messageEn = {"exerciseMenu.dropdown.button.tooltip":"More","exerciseMenu.dropdown.item.codeHistory":"Code Revision History","exerciseMenu.dropdown.item.environment":"Environment","exerciseMenu.dropdown.item.preference":"Editor Preferences","exerciseMenu.dropdown.item.room":"Code Sharing","exerciseMenu.dropdown.item.submitHistory":"Execution/Submission History","exerciseMenu.arduino.agent.button":"Having problem with connecting to Arduino?","exerciseMenu.arduino.setting":"Arduino Setting","exerciseMenu.arduino.setting.device":"Device","exerciseMenu.arduino.setting.noDevice":"No device","exerciseMenu.arduino.setting.selectDevice":"Select device","exerciseMenu.arduino.transferSpeed":"Transfer speed","exerciseMenu.reset.button.tooltip.disabled":"The file cannot be reset","exerciseMenu.reset.button.tooltip.enabled":"Reset the file","exerciseMenu.reset.confirmDialog.body":"Are you sure you want to clear all the code you wrote at current file and reset it?","exerciseMenu.reset.confirmDialog.cancel":"Cancel","exerciseMenu.reset.confirmDialog.confirm":"Confirm","exerciseMenu.reset.confirmDialog.title":"Reset the file","exerciseMenu.stdioFileBrowser.button.tooltip":"File","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"Files sent from your code\nappear here.","exerciseMenu.stdioFileBrowser.popover.header":"File"};
+var messageEn = {"exerciseMenu.dropdown.button.tooltip":"More","exerciseMenu.dropdown.item.codeHistory":"Code Revision History","exerciseMenu.dropdown.item.environment":"Environment","exerciseMenu.dropdown.item.preference":"Editor Preferences","exerciseMenu.dropdown.item.room":"Code Sharing","exerciseMenu.dropdown.item.submitHistory":"Execution/Submission History","exerciseMenu.arduino.setting":"Arduino Setting","exerciseMenu.arduino.transferSpeed":"Transfer speed","exerciseMenu.reset.button.tooltip.disabled":"The file cannot be reset","exerciseMenu.reset.button.tooltip.enabled":"Reset the file","exerciseMenu.reset.confirmDialog.body":"Are you sure you want to clear all the code you wrote at current file and reset it?","exerciseMenu.reset.confirmDialog.cancel":"Cancel","exerciseMenu.reset.confirmDialog.confirm":"Confirm","exerciseMenu.reset.confirmDialog.title":"Reset the file","exerciseMenu.stdioFileBrowser.button.tooltip":"File","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"Files sent from your code\nappear here.","exerciseMenu.stdioFileBrowser.popover.header":"File"};
 
 export { messageEn as default };

package/es/components/material-exercise/exercise-menu/locales/ko.json.js

@@ -1,3 +1,3 @@
-var messageKo = {"exerciseMenu.dropdown.button.tooltip":"더 보기","exerciseMenu.dropdown.item.codeHistory":"코드 수정 이력","exerciseMenu.dropdown.item.environment":"실습 환경","exerciseMenu.dropdown.item.preference":"에디터 설정","exerciseMenu.dropdown.item.room":"코드 공유","exerciseMenu.dropdown.item.submitHistory":"실행/제출 이력","exerciseMenu.arduino.agent.button":"아두이노 연결 중 문제가 발생했나요?","exerciseMenu.arduino.setting":"아두이노 세팅","exerciseMenu.arduino.setting.device":"장치","exerciseMenu.arduino.setting.noDevice":"장치 없음","exerciseMenu.arduino.setting.selectDevice":"장치 선택","exerciseMenu.arduino.transferSpeed":"전송 속도","exerciseMenu.reset.button.tooltip.disabled":"해당 파일은 초기화를 할 수 없습니다","exerciseMenu.reset.button.tooltip.enabled":"코드 초기화","exerciseMenu.reset.confirmDialog.body":"작성한 코드를 모두 지우고 초기화하시겠습니까?","exerciseMenu.reset.confirmDialog.cancel":"취소","exerciseMenu.reset.confirmDialog.confirm":"확인","exerciseMenu.reset.confirmDialog.title":"코드 초기화","exerciseMenu.stdioFileBrowser.button.tooltip":"파일","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"코드에서 전송한 파일이\n여기에 표시됩니다.","exerciseMenu.stdioFileBrowser.popover.header":"파일"};
+var messageKo = {"exerciseMenu.dropdown.button.tooltip":"더 보기","exerciseMenu.dropdown.item.codeHistory":"코드 수정 이력","exerciseMenu.dropdown.item.environment":"실습 환경","exerciseMenu.dropdown.item.preference":"에디터 설정","exerciseMenu.dropdown.item.room":"코드 공유","exerciseMenu.dropdown.item.submitHistory":"실행/제출 이력","exerciseMenu.arduino.setting":"아두이노 세팅","exerciseMenu.arduino.transferSpeed":"전송 속도","exerciseMenu.reset.button.tooltip.disabled":"해당 파일은 초기화를 할 수 없습니다","exerciseMenu.reset.button.tooltip.enabled":"코드 초기화","exerciseMenu.reset.confirmDialog.body":"작성한 코드를 모두 지우고 초기화하시겠습니까?","exerciseMenu.reset.confirmDialog.cancel":"취소","exerciseMenu.reset.confirmDialog.confirm":"확인","exerciseMenu.reset.confirmDialog.title":"코드 초기화","exerciseMenu.stdioFileBrowser.button.tooltip":"파일","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"코드에서 전송한 파일이\n여기에 표시됩니다.","exerciseMenu.stdioFileBrowser.popover.header":"파일"};
 
 export { messageKo as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunner.js

@@ -1,8 +1,7 @@
 import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import _styled from '@emotion/styled/base';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
-import { useEvent } from 'react-use';
 import { postOrgMaterialExerciseExerciseRunningSubmit, postOrgMaterialExerciseExerciseRunningCancel } from '@elice/api-client';
 import { Flex, ResizableNext, Dialog } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -16,10 +15,10 @@ import ExerciseRunnerController from './ExerciseRunnerController.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 import { exerciseState, exerciseEditorPreferenceState, exerciseActiveFilenameState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseRunnerRunTypeState, exerciseRunnerRoomConnectionInfoState, exerciseRunnerStdioFilesState, exercisePreviewTypeState, exercisePreviewDisplayModeState, exerciseMonacoEditorApisState, exerciseWebsocketQuery, exerciseContainerSizeState } from '../context/recoil.js';
-import { useArduino } from '../../../hooks/useArduino.js';
 import { useRunnerRoomWebSocket } from '../../../hooks/useRunnerRoomWebSocket.js';
 import { useStdioWebSocket } from '../../../hooks/useStdioWebSocket.js';
 import { exerciseRunnerTextSend$, exerciseFileEditorSyncRequestAction$ } from '../context/subjects.js';
+import ArduinoBridgeProvider from './arduino/ArduinoProvider.js';
 import XtermLazy from '../../shared/xterm/XtermLazy.js';
 import { withTimeout } from '../../../utils/async.js';
 import { getProgrammingErrorResult } from '../../../utils/runner.js';
@@ -102,26 +101,8 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
   var arduinoTextBuffer = React.useRef('');
   var runnerRunTypeRef = React.useRef(runnerRunTypeState);
   var xterm = React.useRef(null);
-  /**
-   * Handle text received from arduino serial output.
-   */
-  var handleArduinoDigitalOutput = function handleArduinoDigitalOutput(text) {
-    var _a;
-    (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.write(text);
-  };
-  // Arduino
-  var arduino = useArduino({
-    writeTerminal: handleArduinoDigitalOutput
-  });
+  var arduinoBridgeApi = React.useRef(null);
   var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino;
-  /**
-   * Handle destroy arduino client.
-   */
-  var handleArduinoDistroy = React.useCallback(function () {
-    if (isArduinoExercise) {
-      arduino.destroy();
-    }
-  }, [isArduinoExercise, arduino]);
   /**
    * Handle text received from stdio websocket.
    */
@@ -144,10 +125,11 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
    * Handle file received from stdio websocket.
    */
   var handleWsStdioFileReceive = function handleWsStdioFileReceive(stdioFile) {
+    var _a;
     // arduino exercise
     if (isArduinoExercise) {
       if ('filename' in stdioFile && stdioFile.filename.startsWith('firmware') && stdioFile.filename.endsWith('hex')) {
-        arduino.uploadHexFile(stdioFile);
+        (_a = arduinoBridgeApi.current) === null || _a === void 0 ? void 0 : _a.handleIncomingHex(stdioFile.data);
       }
       return;
     }
@@ -407,7 +389,7 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
    * Handle input requests for arduino.
    */
   var handleXtermArduinoInputRequest = function handleXtermArduinoInputRequest(_char) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     switch (_char) {
       // backspace
       case "\x7F":
@@ -418,13 +400,13 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
       case '\r':
         if (arduinoTextBuffer.current.length) {
           (_b = xterm.current) === null || _b === void 0 ? void 0 : _b.write('\r\n');
-          arduino.sendText(arduinoTextBuffer.current);
+          (_c = arduinoBridgeApi.current) === null || _c === void 0 ? void 0 : _c.sendText(arduinoTextBuffer.current);
           arduinoTextBuffer.current = '';
         }
         break;
       // any char
       default:
-        (_c = xterm.current) === null || _c === void 0 ? void 0 : _c.write(_char);
+        (_d = xterm.current) === null || _d === void 0 ? void 0 : _d.write(_char);
         arduinoTextBuffer.current = "".concat(arduinoTextBuffer.current).concat(_char);
         break;
     }
@@ -440,24 +422,6 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
     }
   };
   //
-  // Initialize Arduino devices.
-  //
-  React.useEffect(function () {
-    if (!isArduinoExercise) {
-      return;
-    }
-    void arduino.init();
-    return function () {
-      void arduino.destroy();
-    };
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [exercise]);
-  //
-  // Destroy arduino client when unload window.
-  //
-  useEvent('beforeunload', handleArduinoDistroy, window);
-  //
   // Update runner room websocket state.
   //
   React.useEffect(function () {
@@ -594,23 +558,29 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
   //
   //
   //
+  var runnerBody = jsxs(ExerciseRunnerContext.Provider, {
+    value: {
+      onSubmit: handleRunnerSubmit,
+      onCancel: handleRunnerCancel,
+      onSyncRequest: handleRunnerSyncRequest
+    },
+    children: [jsx(ExerciseRunnerController, {}), jsxs(Flex, {
+      auto: true,
+      style: {
+        minHeight: 0
+      },
+      overflow: "hidden",
+      children: [renderPreview(), renderXterm(), renderRunnerSubmitErrorDialog()]
+    })]
+  });
   return jsx(RawEliceIntlProvider, {
     value: __intl,
     children: jsx(StyledExerciseRunner, {
-      children: jsxs(ExerciseRunnerContext.Provider, {
-        value: {
-          onSubmit: handleRunnerSubmit,
-          onCancel: handleRunnerCancel,
-          onSyncRequest: handleRunnerSyncRequest
-        },
-        children: [jsx(ExerciseRunnerController, {}), jsxs(Flex, {
-          auto: true,
-          style: {
-            minHeight: 0
-          },
-          overflow: "hidden",
-          children: [renderPreview(), renderXterm(), renderRunnerSubmitErrorDialog()]
-        })]
+      children: jsx(ArduinoBridgeProvider, {
+        enabled: isArduinoExercise,
+        xtermRef: xterm,
+        apiRef: arduinoBridgeApi,
+        children: runnerBody
       })
     })
   });

package/es/components/material-exercise/exercise-runner/ExerciseRunnerController.js

@@ -5,12 +5,12 @@ import { Flex, Hspace } from '@elice/blocks';
 import { enums } from '@elice/types';
 import { useRecoilValue } from 'recoil';
 import { MATERIAL_DIVIDER_BORDER_VALUE } from '../../../constants/stylesheets.js';
-import ExerciseRunnerControllerArduinoAgentModal from './ExerciseRunnerControllerArduinoAgentModal.js';
-import ExerciseRunnerControllerArduinoStatusMessage from './ExerciseRunnerControllerArduinoStatusMessage.js';
 import ExerciseRunnerControllerButtonGroup from './ExerciseRunnerControllerButtonGroup.js';
 import ExerciseRunnerControllerRunningInfo from './ExerciseRunnerControllerRunningInfo.js';
 import ExerciseRunnerControllerStatusMessage from './ExerciseRunnerControllerStatusMessage.js';
 import ExerciseRunnerControllerTimer from './ExerciseRunnerControllerTimer.js';
+import ArduinoControllerButtonGroup from './arduino/ArduinoControllerButtonGroup.js';
+import ArduinoControllerStatusMessage from './arduino/ArduinoControllerStatusMessage.js';
 import { ExerciseContext } from '../context/context.js';
 import { exerciseState, exerciseActiveFilenameState } from '../context/recoil.js';
 import { useExerciseFileEditable } from '../../../hooks/useExerciseFile.js';
@@ -23,20 +23,47 @@ var ExerciseRunnerController = function ExerciseRunnerController() {
   var _React$useContext = React.useContext(ExerciseContext),
     materialExerciseId = _React$useContext.materialExerciseId;
   var exercise = useRecoilValue(exerciseState(materialExerciseId));
-  var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino;
   var activeFilename = useRecoilValue(exerciseActiveFilenameState);
   var isFileEditable = useExerciseFileEditable(activeFilename);
+  /**
+   *
+   */
+  var renderControllerButtonGroup = function renderControllerButtonGroup() {
+    switch (exercise === null || exercise === void 0 ? void 0 : exercise.envType) {
+      case enums.ExerciseEnvType.Arduino:
+        return jsx(ArduinoControllerButtonGroup, {});
+      default:
+        return jsx(ExerciseRunnerControllerButtonGroup, {});
+    }
+  };
+  /**
+   *
+   */
+  var renderControllerStatusMessage = function renderControllerStatusMessage() {
+    if (!isFileEditable) {
+      return null;
+    }
+    switch (exercise === null || exercise === void 0 ? void 0 : exercise.envType) {
+      case enums.ExerciseEnvType.Arduino:
+        return jsx(ArduinoControllerStatusMessage, {});
+      default:
+        return jsx(ExerciseRunnerControllerStatusMessage, {});
+    }
+  };
+  //
+  //
+  //
   return jsxs(StyledController, {
     children: [jsxs(Flex, {
       align: "center",
-      children: [jsx(ExerciseRunnerControllerButtonGroup, {}), jsx(Hspace, {
+      children: [renderControllerButtonGroup(), jsx(Hspace, {
         width: 1
       }), jsx(ExerciseRunnerControllerRunningInfo, {}), jsx(ExerciseRunnerControllerTimer, {})]
-    }), isFileEditable ? jsxs(Flex, {
+    }), jsx(Flex, {
       column: true,
       align: "flex-end",
-      children: [jsx(ExerciseRunnerControllerStatusMessage, {}), isArduinoExercise ? jsx(ExerciseRunnerControllerArduinoStatusMessage, {}) : null]
-    }) : null, isArduinoExercise ? jsx(ExerciseRunnerControllerArduinoAgentModal, {}) : null]
+      children: renderControllerStatusMessage()
+    })]
   });
 };
 

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerButtonGroup.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 declare const ExerciseRunnerControllerButtonGroup: React.VFC;
 export default ExerciseRunnerControllerButtonGroup;