feat(stepper): integrate Conductor plugin tabs and dynamic loading of web plugins

package.json

@@ -46,9 +46,9 @@
     "@sentry/react": "^10.5.0",
     "@sourceacademy/autocomplete": "github:source-academy/autocomplete#e669d9ed98753350a3c8433a92985227eb789663",
     "@sourceacademy/c-slang": "^1.0.21",
-    "@sourceacademy/conductor": "https://github.com/source-academy/conductor.git#0.4.0",
+    "@sourceacademy/conductor": "portal:../conductor",
     "@sourceacademy/language-directory": "https://github.com/source-academy/language-directory.git#0.0.6",
-    "@sourceacademy/plugin-directory": "https://github.com/source-academy/plugin-directory.git#0.0.2",
+    "@sourceacademy/plugin-directory": "portal:../plugin-directory",
     "@sourceacademy/sharedb-ace": "2.1.1",
     "@sourceacademy/sling-client": "^0.1.0",
     "@szhsin/react-menu": "^4.0.0",
@@ -196,6 +196,7 @@
   },
   "resolutions": {
     "@types/estree": "1.0.9",
-    "vite": "^8.0.0"
+    "vite": "^8.0.0",
+    "js-slang": "portal:/Users/shreyjain/Downloads/source-academy/js-slang"
   }
 }

public/index.html

@@ -4,6 +4,20 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
         <meta name="theme-color" content="#000000" />
+        <!--
+          Import map so dynamically-imported Conductor web plugin bundles resolve these bare
+          specifiers to the host frontend's singleton instances (see src/bootstrap/conductorSharedDeps.ts
+          and public/shims/*). Keeps a single React tree and identical Blueprint styling.
+        -->
+        <script type="importmap">
+        {
+            "imports": {
+                "react": "<%= assetPrefix %>/shims/react.mjs",
+                "react/jsx-runtime": "<%= assetPrefix %>/shims/react-jsx-runtime.mjs",
+                "@blueprintjs/core": "<%= assetPrefix %>/shims/blueprintjs-core.mjs"
+            }
+        }
+        </script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.min.js"
 		integrity="sha256-yYE5i030zFWS1QObMdcpEqiGU10EwGSEAQaYGnQBUs0="
 		crossorigin="anonymous"></script>

public/languages/directory.json

@@ -0,0 +1,38 @@
+[
+  {
+    "id": "source-1",
+    "name": "Source 1 (Stepper)",
+    "evaluators": [
+      {
+        "id": "default",
+        "name": "Default",
+        "path": "/evaluators/js-slang/SourceStepperEvaluator1.js",
+        "capabilities": []
+      }
+    ]
+  },
+  {
+    "id": "source-2",
+    "name": "Source 2 (Stepper)",
+    "evaluators": [
+      {
+        "id": "default",
+        "name": "Default",
+        "path": "/evaluators/js-slang/SourceStepperEvaluator2.js",
+        "capabilities": []
+      }
+    ]
+  },
+  {
+    "id": "python-1",
+    "name": "Python 1 (Stepper)",
+    "evaluators": [
+      {
+        "id": "default",
+        "name": "Default",
+        "path": "/evaluators/py-slang/PythonStepperEvaluator1.js",
+        "capabilities": []
+      }
+    ]
+  }
+]

public/plugins/directory.json

@@ -0,0 +1,10 @@
+[
+  {
+    "id": "stepper",
+    "name": "Stepper",
+    "description": "Visualises the step-by-step substitution evaluation of a program.",
+    "resolutions": {
+      "web": "/plugins/stepper/index.mjs"
+    }
+  }
+]

public/shims/blueprintjs-core.mjs

@@ -0,0 +1,17 @@
+// Import-map shim: resolves a plugin bundle's `import ... from "@blueprintjs/core"` to the host
+// frontend's Blueprint build (exposed on globalThis by src/bootstrap/conductorSharedDeps.ts), so the
+// plugin's Blueprint components share the host's CSS and React instance.
+//
+// Re-exports the surface used by the bundled plugins; extend this list if a plugin needs more.
+const Blueprint = globalThis.__SA_BLUEPRINT__;
+export const {
+  Button,
+  ButtonGroup,
+  Card,
+  Classes,
+  Divider,
+  Icon,
+  Popover,
+  Pre,
+  Slider,
+} = Blueprint;

public/shims/react-jsx-runtime.mjs

@@ -0,0 +1,4 @@
+// Import-map shim: resolves a plugin bundle's `import ... from "react/jsx-runtime"` to the host
+// frontend's React jsx-runtime (exposed on globalThis by src/bootstrap/conductorSharedDeps.ts).
+const jsxRuntime = globalThis.__SA_REACT_JSX__;
+export const { jsx, jsxs, Fragment } = jsxRuntime;

public/shims/react.mjs

@@ -0,0 +1,41 @@
+// Import-map shim: resolves a plugin bundle's `import ... from "react"` to the host frontend's
+// single React instance (exposed on globalThis by src/bootstrap/conductorSharedDeps.ts).
+const React = globalThis.__SA_REACT__;
+export default React.default ?? React;
+export const {
+  Children,
+  Component,
+  Fragment,
+  Profiler,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  cloneElement,
+  createContext,
+  createElement,
+  createRef,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+  startTransition,
+  use,
+  useActionState,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+  version,
+} = React;

src/bootstrap/conductorSharedDeps.ts

@@ -0,0 +1,20 @@
+/**
+ * Exposes the frontend's singleton library instances so that dynamically-imported Conductor web
+ * plugin bundles can share them, rather than bundling (and duplicating) their own copies.
+ *
+ * Plugin bundles import `react`, `react/jsx-runtime` and `@blueprintjs/core` as bare specifiers.
+ * The import map in `public/index.html` maps those specifiers to the shim modules in `public/shims`,
+ * which re-export the globals set here. The result: the plugin renders inside the host's single
+ * React tree and uses the host's exact Blueprint build (so styling is identical).
+ *
+ * This module must be imported before any plugin is loaded; it is imported first from `index.tsx`.
+ */
+import * as Blueprint from '@blueprintjs/core';
+// eslint-disable-next-line no-restricted-imports
+import * as React from 'react';
+import * as ReactJsxRuntime from 'react/jsx-runtime';
+
+const globals = globalThis as Record<string, unknown>;
+globals.__SA_REACT__ = React;
+globals.__SA_REACT_JSX__ = ReactJsxRuntime;
+globals.__SA_BLUEPRINT__ = Blueprint;

src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts

@@ -448,9 +448,14 @@ function* handleResults(
   workspaceLocation: WorkspaceLocation,
 ): SagaIterator {
   const resultChan = eventChannel(emitter => {
-    hostPlugin.receiveResult = emitter;
+    // redux-saga's eventChannel throws on `undefined`; an evaluator may legitimately produce an
+    // undefined result, so drop it rather than crash the channel.
+    const receive = (result: any) => {
+      if (result !== undefined) emitter(result);
+    };
+    hostPlugin.receiveResult = receive;
     return () => {
-      if (hostPlugin.receiveResult === emitter) delete hostPlugin.receiveResult;
+      if (hostPlugin.receiveResult === receive) delete hostPlugin.receiveResult;
     };
   });
   try {
@@ -468,6 +473,7 @@ function* handleResults(
 function* handleErrors(
   hostPlugin: BrowserHostPlugin,
   workspaceLocation: WorkspaceLocation,
+  onTerminate: () => void,
 ): SagaIterator {
   const errorChan = eventChannel(emitter => {
     hostPlugin.receiveError = emitter;
@@ -479,6 +485,11 @@ function* handleErrors(
     while (true) {
       const error = yield take(errorChan);
       yield put(actions.appendInterpreterError([toConductorSourceError(error)], workspaceLocation));
+      // Signal the REPL loop that evaluation has ended due to an error.
+      // We call onTerminate() here as a safety net: the runner should also
+      // send a terminal status (STOPPED/ERROR) which handleStatuses will catch,
+      // but if it doesn't (e.g. older evaluator build), this ensures we unblock.
+      onTerminate();
     }
   } finally {
     if (yield cancelled()) {
@@ -490,6 +501,7 @@ function* handleErrors(
 function* handleStatuses(
   hostPlugin: BrowserHostPlugin,
   workspaceLocation: WorkspaceLocation,
+  onTerminate: () => void,
 ): SagaIterator {
   const statusChan = eventChannel<{ status: RunnerStatus; isActive: boolean }>(emitter => {
     const onStatusUpdate = (status: RunnerStatus, isActive: boolean) =>
@@ -510,7 +522,8 @@ function* handleStatuses(
         isActive && (status === RunnerStatus.STOPPED || status === RunnerStatus.ERROR);
 
       if (isTerminalStatus) {
-        yield put(actions.beginInterruptExecution(workspaceLocation));
+        // Unblock the REPL loop via the shared termination signal.
+        onTerminate();
       }
     }
   } finally {
@@ -551,35 +564,57 @@ export function* evalCodeConductorSaga(
     { files, consume: true },
   );
 
+  // A one-shot Promise that resolves when the evaluator signals it has finished
+  // (either via a terminal status or via an error with no follow-up status).
+  // Using a Promise + eventChannel means the signal is completely decoupled from
+  // Redux action ordering, avoiding the race condition where beginInterruptExecution
+  // dispatched by evalEditorSaga is buffered and consumed by this loop before the
+  // evaluator even has a chance to report an error.
+  let resolveTerminated!: () => void;
+  const terminatedChan = eventChannel<true>(emitter => {
+    resolveTerminated = () => emitter(true);
+    return () => {};
+  });
+
+
   // Begin evaluation
   const stdoutTask = yield fork(handleStdout, hostPlugin, workspaceLocation);
   const resultTask = yield fork(handleResults, hostPlugin, workspaceLocation);
-  const errorTask = yield fork(handleErrors, hostPlugin, workspaceLocation);
-  const statusTask = yield fork(handleStatuses, hostPlugin, workspaceLocation);
-  yield call([hostPlugin, 'startEvaluator'], entrypointFilePath);
-
-  // This exit logic of this while loop might be causing an unintended infinite loop in the REPL
-  while (true) {
-    const { stop } = yield race({
-      repl: take(actions.evalRepl.type),
-      stop: take(actions.beginInterruptExecution.type),
-    });
-    if (stop) break;
-    const code: string = yield select(
-      (state: OverallState) => state.workspaces[workspaceLocation].replValue,
-    );
-    yield put(actions.sendReplInputToOutput(code, workspaceLocation));
-    yield put(actions.clearReplInput(workspaceLocation));
-    yield call([hostPlugin, 'sendChunk'], code);
+  const errorTask = yield fork(handleErrors, hostPlugin, workspaceLocation, resolveTerminated);
+  const statusTask = yield fork(handleStatuses, hostPlugin, workspaceLocation, resolveTerminated);
+
+  try {
+    yield call([hostPlugin, 'startEvaluator'], entrypointFilePath);
+
+    // The REPL loop processes REPL inputs until the evaluator signals termination.
+    // Using a dedicated termination channel (not beginInterruptExecution) avoids the
+    // race condition where a pre-dispatched beginInterruptExecution from evalEditorSaga
+    // is buffered and consumed by this loop prematurely.
+    while (true) {
+      const { stop } = yield race({
+        repl: take(actions.evalRepl.type),
+        stop: take(terminatedChan),
+      });
+      if (stop) break;
+      const code: string = yield select(
+        (state: OverallState) => state.workspaces[workspaceLocation].replValue,
+      );
+      yield put(actions.sendReplInputToOutput(code, workspaceLocation));
+      yield put(actions.clearReplInput(workspaceLocation));
+      yield call([hostPlugin, 'sendChunk'], code);
+    }
+  } finally {
+    // Always clean up — runs on normal exit, error, or saga cancellation (takeLatest).
+    terminatedChan.close();
+    yield cancel(statusTask);
+    yield cancel(stdoutTask);
+    yield cancel(resultTask);
+    yield cancel(errorTask);
+    yield call([conduit, 'terminate']);
+    yield put(actions.endInterruptExecution(workspaceLocation));
+    yield put(actions.setIsRunning(false, workspaceLocation));
+    console.log('[conductor] saga terminated');
   }
-  yield cancel(statusTask);
-  yield call([conduit, 'terminate']);
-  yield cancel(stdoutTask);
-  yield cancel(resultTask);
-  yield cancel(errorTask);
-  //yield put(actions.debuggerReset(workspaceLocation));
-  yield put(actions.endInterruptExecution(workspaceLocation));
-  console.log('killed');
 }
 
 // Special module errors

src/commons/sagas/WorkspaceSaga/index.ts

@@ -136,8 +136,10 @@ const WorkspaceSaga = combineSagaHandlers({
       }
     });
   },
-  [WorkspaceActions.evalEditor.type]: ({ payload: { workspaceLocation } }) =>
-    evalEditorSaga(workspaceLocation),
+  [WorkspaceActions.evalEditor.type]: {
+    takeLatest: ({ payload: { workspaceLocation } }) => evalEditorSaga(workspaceLocation),
+  },
+
   [WorkspaceActions.promptAutocomplete.type]: function* (action) {
     const workspaceLocation = action.payload.workspaceLocation;
     const {