Wire autocomplete and syntax highlighting to ace editor (#3828)

* feat(conductor): wire autocomplete and syntax highlighting to ace editor

Set up the conductor autocomplete plugin host side, including per-evaluator
syntax highlighting via SyntaxHighlightData. Fixes startup highlighting by
listening to editor session swaps (changeSession) and reapplying the correct
ace mode. Eliminates duplicate conductor preload race by consolidating
preload to a single saga handler.

Co-authored-by: Aarav Malani <aarav.malani@gmail.com>

* chore: update yarn.lock for @sourceacademy/autocomplete dependency

* Update src/commons/sagas/WorkspaceSaga/index.ts

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

* chore

* ci: retrigger lint check

* style: fix import sort order

* resolve merge conflict

* ci: retrigger lint check

* chore

* Remove comment

* Remove comment

* Add type qualifier

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* fix(editor): guard acequire against missing mode module

* fix(editor): guard acequire against missing mode module

* Organize imports post-merge

---------

Co-authored-by: Aarav Malani <aarav.malani@gmail.com>

Author: MengJit

package.json

@@ -42,6 +42,7 @@
     "@octokit/rest": "^22.0.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@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/language-directory": "https://github.com/source-academy/language-directory.git#0.0.6",

src/commons/editor/Editor.tsx

@@ -36,7 +36,10 @@ import { AceMouseEvent, HighlightedLines, Position } from './EditorTypes';
 // TODO: Should further refactor into EditorBase + different variants.
 // Ideally, hooks should be specified by the parent component instead.
 import type { SharedbAceUser } from '@sourceacademy/sharedb-ace/types';
+import { flagConductorEnable } from 'src/features/conductor/flagConductorEnable';
 import { ExternalLibraryName } from '../application/types/ExternalTypes';
+import { useFeature } from '../featureFlags/useFeature';
+import { useTypedSelector } from '../utils/Hooks';
 import useHighlighting from './UseHighlighting';
 import useNavigation from './UseNavigation';
 import useRefactor from './UseRefactor';
@@ -72,6 +75,7 @@ type EditorStateProps = {
   sourceVariant?: Variant;
   hooks?: EditorHook[];
   editorBinding?: EditorBinding;
+  mode?: string;
   setUsers?: React.Dispatch<React.SetStateAction<Record<string, SharedbAceUser>>>;
   // TODO: Handle changing of external library
   updateLanguageCallback?: (sublanguage: SALanguage, e: any) => void;
@@ -471,6 +475,67 @@ const EditorBase = memo((props: EditorProps & LocalStateProps) => {
     }
   };
 
+  const conductorEnabled = useFeature(flagConductorEnable);
+  const selectedEvaluatorId = useTypedSelector(s => s.languageDirectory.selectedEvaluatorId)!;
+  useEffect(() => {
+    if (!conductorEnabled || !reactAceRef.current || !selectedEvaluatorId) {
+      return;
+    }
+
+    const editor = reactAceRef.current.editor;
+    const modeId = `ace/mode/${selectedEvaluatorId}`;
+    let modeChangeUnsub: (() => void) | undefined;
+    let pollHandle: ReturnType<typeof setInterval> | undefined;
+
+    const apply = (session: any) => {
+      let modeModule: any;
+      try {
+        modeModule = acequire(modeId);
+      } catch {
+        return false;
+      }
+      if (!modeModule?.Mode) return false;
+      if ((session.getMode() as any).$id === modeId) return true;
+      session.setMode(new modeModule.Mode());
+      return true;
+    };
+
+    const attachToSession = (session: any) => {
+      modeChangeUnsub?.();
+      if (pollHandle) clearInterval(pollHandle);
+
+      const onChangeMode = () => {
+        if ((session.getMode() as any).$id !== modeId) {
+          apply(session);
+        }
+      };
+      session.on('changeMode', onChangeMode);
+      modeChangeUnsub = () => session.off('changeMode', onChangeMode);
+
+      if (!apply(session)) {
+        pollHandle = setInterval(() => {
+          if (apply(session)) {
+            clearInterval(pollHandle);
+            pollHandle = undefined;
+          }
+        }, 200);
+      }
+    };
+
+    attachToSession(editor.getSession());
+
+    const onChangeSession = (e: any) => {
+      attachToSession(e.session);
+    };
+    editor.on('changeSession', onChangeSession);
+
+    return () => {
+      modeChangeUnsub?.();
+      if (pollHandle) clearInterval(pollHandle);
+      editor.off('changeSession', onChangeSession);
+    };
+  }, [conductorEnabled, selectedEvaluatorId]);
+
   const aceEditorProps: IAceEditorProps = {
     className: 'react-ace',
     editorProps: {
@@ -480,7 +545,9 @@ const EditorBase = memo((props: EditorProps & LocalStateProps) => {
     fontSize: 17,
     height: '100%',
     highlightActiveLine: false,
-    mode: getModeString(sourceChapter, sourceVariant, externalLibraryName),
+    mode: conductorEnabled
+      ? 'text'
+      : getModeString(sourceChapter, sourceVariant, externalLibraryName),
     theme: 'source',
     value: props.editorValue,
     width: '100%',

src/commons/sagas/LanguageDirectorySaga.ts

@@ -1,12 +1,14 @@
 import { ILanguageDefinition } from '@sourceacademy/language-directory/dist/types';
 import { getEvaluatorDefinition } from '@sourceacademy/language-directory/dist/util';
 import { call, fork, put, select } from 'redux-saga/effects';
+import { selectConductorEnable } from 'src/features/conductor/flagConductorEnable';
 import { selectDirectoryLanguageUrl } from 'src/features/directory/flagDirectoryLanguageUrl';
 
 import LanguageDirectoryActions from '../../features/directory/LanguageDirectoryActions';
 import { LanguageDirectoryState } from '../../features/directory/LanguageDirectoryTypes';
 import type { OverallState } from '../application/ApplicationTypes';
 import { combineSagaHandlers } from '../redux/utils';
+import { preloadConductorEvaluatorSaga } from './helpers/conductorEvaluatorCache';
 
 export function* getLanguageDefinitionSaga() {
   const directory: LanguageDirectoryState = yield select(
@@ -48,6 +50,18 @@ const languageDirectoryHandlers = combineSagaHandlers({
     if (language.evaluators.length > 0) {
       yield put(LanguageDirectoryActions.setSelectedEvaluator(language.evaluators[0].id));
     }
+
+    const conductorEnabled: boolean = yield select(selectConductorEnable);
+    if (!conductorEnabled) return;
+
+    const evaluator = yield call(getEvaluatorDefinitionSaga);
+    if (!evaluator?.path) return;
+
+    try {
+      yield call(preloadConductorEvaluatorSaga, evaluator.path);
+    } catch (error) {
+      console.error('Failed to preload:', error);
+    }
   }
 });
 

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

@@ -18,9 +18,7 @@ import { makeCCompilerConfig, specialCReturnObject } from '../../../../commons/u
 import { javaRun } from '../../../../commons/utils/JavaHelper';
 import { EventType } from '../../../../features/achievement/AchievementTypes';
 import type { BrowserHostPlugin } from '../../../../features/conductor/BrowserHostPlugin';
-import { createConductor } from '../../../../features/conductor/createConductor';
 import { selectConductorEnable } from '../../../../features/conductor/flagConductorEnable';
-import { selectConductorEvaluatorUrl } from '../../../../features/conductor/flagConductorEvaluatorUrl';
 import LanguageDirectoryActions from '../../../../features/directory/LanguageDirectoryActions';
 import StoriesActions from '../../../../features/stories/StoriesActions';
 import { type OverallState } from '../../../application/ApplicationTypes';
@@ -31,6 +29,7 @@ import { showWarningMessage } from '../../../utils/notifications/NotificationsHe
 import { makeExternalBuiltins as makeSourcerorExternalBuiltins } from '../../../utils/SourcerorHelper';
 import WorkspaceActions from '../../../workspace/WorkspaceActions';
 import { EVAL_SILENT, type WorkspaceLocation } from '../../../workspace/WorkspaceTypes';
+import { getPreparedConductorSaga } from '../../helpers/conductorEvaluatorCache';
 import { getEvaluatorDefinitionSaga } from '../../LanguageDirectorySaga';
 import { selectStoryEnv, selectWorkspace } from '../../SafeEffects';
 import { dumpDisplayBuffer } from './dumpDisplayBuffer';
@@ -560,8 +559,7 @@ function* handleStatuses(
 /**
  * Runs code using the evaluators in the Language Directory using the Conductor framework.
  * Invoked when the conductor.enable feature flag is enabled.
- * Fetches the evaluator from the URL specified in the language directory and creates a Conductor instance
- * to load the evaluator and run the code in a web worker.
+ * Uses a preloaded Conductor instance when available to reduce startup latency.
  */
 export function* evalCodeConductorSaga(
   files: Record<string, string>,
@@ -585,21 +583,11 @@ export function* evalCodeConductorSaga(
     evaluator = yield call(getEvaluatorDefinitionSaga);
     if (!evaluator?.path) throw Error('no evaluator');
   }
-  const overrideEvaluatorPath: string = (yield select(selectConductorEvaluatorUrl))?.trim?.() ?? '';
-  const path: string = overrideEvaluatorPath || evaluator.path;
 
-  // Download evaluator code
-  const evaluatorResponse: Response = yield call(fetch, path);
-  if (!evaluatorResponse.ok) throw Error("can't get evaluator");
-  const evaluatorBlob: Blob = yield call([evaluatorResponse, 'blob']);
-  const url: string = yield call(URL.createObjectURL, evaluatorBlob);
-
-  // Create Conductor instance ith the evaluator
+  // Reuse a preloaded conductor instance when available.
   const { hostPlugin, conduit }: { hostPlugin: BrowserHostPlugin; conduit: IConduit } = yield call(
-    createConductor,
-    url,
-    async (fileName: string) => files[fileName],
-    (pluginName: string) => {} // TODO: implement dynamic plugin loading
+    getPreparedConductorSaga,
+    { files, consume: true }
   );
 
   // Begin evaluation
@@ -631,7 +619,6 @@ export function* evalCodeConductorSaga(
   //yield put(actions.debuggerReset(workspaceLocation));
   yield put(actions.endInterruptExecution(workspaceLocation));
   console.log('killed');
-  yield call(URL.revokeObjectURL, url);
 }
 
 // Special module errors

src/commons/sagas/WorkspaceSaga/index.ts

@@ -1,8 +1,15 @@
+import { AutoCompleteEntry } from '@sourceacademy/autocomplete';
+import type { IConduit } from '@sourceacademy/conductor/conduit';
 import type { FSModule } from 'browserfs/dist/node/core/FS';
 import { type Context, findDeclaration, getNames } from 'js-slang';
 import { Chapter, Variant } from 'js-slang/dist/langs';
 import Phaser from 'phaser';
-import { call, put, select } from 'redux-saga/effects';
+import type { EventChannel } from 'redux-saga';
+import { call, put, select, take } from 'redux-saga/effects';
+import { race } from 'redux-saga/effects';
+import { delay } from 'redux-saga/effects';
+import AutoCompletePlugin from 'src/features/conductor/AutocompletePlugin';
+import { BrowserHostPlugin } from 'src/features/conductor/BrowserHostPlugin';
 
 import InterpreterActions from '../../../commons/application/actions/InterpreterActions';
 import { combineSagaHandlers } from '../../../commons/redux/utils';
@@ -33,6 +40,7 @@ import {
   showWarningMessage
 } from '../../utils/notifications/NotificationsHelper';
 import { showFullJSDisclaimer, showFullTSDisclaimer } from '../../utils/WarningDialogHelper';
+import { getPreparedConductorSaga } from '../helpers/conductorEvaluatorCache';
 import { selectWorkspace } from '../SafeEffects';
 import { evalCodeSaga } from './helpers/evalCode';
 import { evalEditorSaga } from './helpers/evalEditor';
@@ -148,7 +156,6 @@ const WorkspaceSaga = combineSagaHandlers({
       externalLibrary: extLib,
       programPrependValue: prepend
     } = yield* selectWorkspace(workspaceLocation);
-
     const editorValue = editorTabs[activeEditorTabIndex ?? 0].value;
 
     // Deal with prepended code
@@ -161,6 +168,49 @@ const WorkspaceSaga = combineSagaHandlers({
       autocompleteCode = prepend + '\n' + editorValue;
     }
 
+    if (yield select(selectConductorEnable)) {
+      const { conduit }: { hostPlugin: BrowserHostPlugin; conduit: IConduit } =
+        yield call(getPreparedConductorSaga);
+
+      const plugin = conduit.lookupPlugin('__autocomplete_plugin_web') as AutoCompletePlugin;
+      if (plugin) {
+        const channel: EventChannel<AutoCompleteEntry[]> = yield call(
+          [plugin, 'complete'],
+          autocompleteCode,
+          action.payload.row + prependLength,
+          action.payload.column
+        );
+        //const names: AutoCompleteEntry[] = yield take(channel);
+        const { names, timeout }: { names?: AutoCompleteEntry[]; timeout?: true } = yield race({
+          names: take(channel),
+          timeout: delay(3000)
+        });
+
+        if (timeout || !names) {
+          console.warn('autocomplete channel timed out — runner never replied');
+          channel.close();
+          return;
+        }
+
+        yield call(
+          action.payload.callback,
+          null,
+          names.map(name => ({
+            meta: name.meta,
+            value: name.name,
+            caption: name.name,
+            docHTML: name.docHTML,
+            score: name.score ? name.score + 1000 : 1000, // Prioritize suggestions from code
+            name: undefined
+          }))
+        );
+        channel.close();
+      } else {
+        yield call(action.payload.callback, null, []);
+      }
+      return;
+    }
+
     const [editorNames, displaySuggestions]: Awaited<ReturnType<typeof getNames>> = yield call(
       getNames,
       autocompleteCode,