Restore intellisense to the Collaborative Editor (#4387)

* fix code assist zindex in legacy editor

* restore code assist logic

* refactor loading spinner

* refactor

* tidy

* tidy options

* Fix Monaco mock to include languages.typescript API

CollaborativeMonaco now calls monaco.languages.typescript.javascriptDefaults.setCompilerOptions()
for intellisense. Both the global Monaco mock and the local mock in the diff test
need to provide this API to prevent "Cannot read properties of undefined (reading 'typescript')" errors.

* Mock loadDTS to prevent unhandled rejection errors in tests

The loadDTS function makes network calls that can fail in test environments,
causing unhandled rejection errors that make vitest exit with code 1 even
when all tests pass.

* remove overflow stuff and add changelog

---------

Co-authored-by: Elias W. BA <eliaswalyba@gmail.com>

Author: josephjclark

CHANGELOG.md

@@ -38,6 +38,8 @@ and this project adheres to
 
 ### Fixed
 
+- Fixed code-assist widget
+  [4386](https://github.com/OpenFn/lightning/issues/4386)
 - AI Assistant button now disabled when Apollo not configured, preventing silent
   failures [#4354](https://github.com/OpenFn/lightning/issues/4354)
 - Version chip missing tooltips

assets/js/collaborative-editor/components/CollaborativeMonaco.tsx

@@ -20,8 +20,12 @@ import { type Monaco, MonacoEditor, setTheme } from '../../monaco';
 import { addKeyboardShortcutOverrides } from '../../monaco/keyboard-overrides';
 import { useHandleDiffDismissed } from '../contexts/MonacoRefContext';
 
+import createCompletionProvider from '../../editor/magic-completion';
+
+import { LoadingIndicator } from './common/LoadingIndicator';
 import { Cursors } from './Cursors';
 import { Tooltip } from './Tooltip';
+import { loadDTS, type Lib } from '../utils/loadDTS';
 
 export interface MonacoHandle {
   showDiff: (originalCode: string, modifiedCode: string) => void;
@@ -33,6 +37,7 @@ interface CollaborativeMonacoProps {
   ytext: Y.Text;
   awareness: Awareness;
   adaptor?: string;
+  metadata?: object;
   disabled?: boolean;
   className?: string;
   options?: editor.IStandaloneEditorConstructionOptions;
@@ -46,6 +51,7 @@ export const CollaborativeMonaco = forwardRef<
     ytext,
     awareness,
     adaptor = 'common',
+    metadata,
     disabled = false,
     className,
     options = {},
@@ -57,6 +63,10 @@ export const CollaborativeMonaco = forwardRef<
   const bindingRef = useRef<MonacoBinding>();
   const [editorReady, setEditorReady] = useState(false);
 
+  // Type definitions state
+  const [lib, setLib] = useState<Lib[]>();
+  const [loading, setLoading] = useState(false);
+
   // Get callback from context to notify when diff is dismissed
   const handleDiffDismissed = useHandleDiffDismissed();
 
@@ -66,6 +76,9 @@ export const CollaborativeMonaco = forwardRef<
   const containerRef = useRef<HTMLDivElement | null>(null);
   const diffContainerRef = useRef<HTMLDivElement | null>(null);
 
+  // Overflow widgets container ref
+  const overflowNodeRef = useRef<HTMLDivElement>();
+
   // Base editor options shared between main and diff editors
   const baseEditorOptions: editor.IStandaloneEditorConstructionOptions =
     useMemo(
@@ -82,6 +95,18 @@ export const CollaborativeMonaco = forwardRef<
         insertSpaces: true,
         automaticLayout: true,
         fixedOverflowWidgets: true,
+        codeLens: false,
+        wordBasedSuggestions: 'off',
+        showFoldingControls: 'always',
+        suggest: {
+          showModules: true,
+          showKeywords: false,
+          showFiles: false,
+          showClasses: false,
+          showInterfaces: false,
+          showConstructors: false,
+          showDeprecated: false,
+        },
       }),
       []
     );
@@ -99,6 +124,12 @@ export const CollaborativeMonaco = forwardRef<
 
       addKeyboardShortcutOverrides(editor, monaco);
 
+      // Configure TypeScript compiler options
+      monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+        allowNonTsExtensions: true,
+        noLib: true,
+      });
+
       // Don't create binding here - let the useEffect handle it
       // This ensures binding is created/updated whenever ytext changes
     },
@@ -210,6 +241,55 @@ export const CollaborativeMonaco = forwardRef<
     };
   }, []);
 
+  // Load type definitions when adaptor changes
+  useEffect(() => {
+    if (adaptor) {
+      setLoading(true);
+      setLib([]); // instantly clear intelligence
+      loadDTS(adaptor)
+        .then(l => {
+          setLib(l);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  }, [adaptor]);
+
+  // Set extra libs on Monaco when lib changes
+  useEffect(() => {
+    if (monacoRef.current && lib) {
+      monacoRef.current.languages.typescript.javascriptDefaults.setExtraLibs(
+        lib
+      );
+    }
+  }, [lib]);
+
+  // Register metadata completion provider
+  useEffect(() => {
+    if (monacoRef.current && metadata) {
+      const provider =
+        monacoRef.current.languages.registerCompletionItemProvider(
+          'javascript',
+          createCompletionProvider(monacoRef.current, metadata)
+        );
+      return () => {
+        provider.dispose();
+      };
+    }
+  }, [metadata]);
+
+  // Cleanup overflow node on unmount
+  useEffect(() => {
+    return () => {
+      if (overflowNodeRef.current) {
+        overflowNodeRef.current.parentNode?.removeChild(
+          overflowNodeRef.current
+        );
+      }
+    };
+  }, []);
+
   // showDiff function - creates diff editor overlay
   const showDiff = useCallback(
     (originalCode: string, modifiedCode: string) => {
@@ -354,6 +434,9 @@ export const CollaborativeMonaco = forwardRef<
 
   return (
     <div className={cn('relative', className || 'h-full w-full')}>
+      <div className="relative z-10 h-0 overflow-visible text-right text-xs text-white">
+        {loading && <LoadingIndicator text="Loading types" />}
+      </div>
       {/* Standard editor container */}
       <div ref={containerRef} className="h-full w-full">
         <Cursors />

assets/js/collaborative-editor/components/common/LoadingIndicator.tsx

@@ -0,0 +1,24 @@
+import { Spinner } from './Spinner';
+
+interface LoadingIndicatorProps {
+  text?: string;
+}
+
+/**
+ * LoadingIndicator - Text with spinner for loading states
+ *
+ * Displays a text message alongside a spinning icon.
+ * Used for Monaco editor type definitions loading.
+ *
+ * @example
+ * <LoadingIndicator text="Loading types" />
+ * <LoadingIndicator text="Loading workflow" />
+ */
+export function LoadingIndicator({ text = 'Loading' }: LoadingIndicatorProps) {
+  return (
+    <div className="inline-block p-2">
+      <Spinner size="md" className="inline-block mr-2" />
+      <span>{text}</span>
+    </div>
+  );
+}

assets/js/collaborative-editor/components/common/Spinner.tsx

@@ -0,0 +1,35 @@
+import { cn } from '#/utils/cn';
+
+interface SpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+/**
+ * Spinner - Reusable loading spinner using heroicons
+ *
+ * Uses the `hero-arrow-path` icon with Tailwind's `animate-spin` class,
+ * following the established pattern across the collaborative-editor.
+ *
+ * @example
+ * <Spinner size="md" />
+ * <Spinner size="sm" className="text-primary-500" />
+ */
+export function Spinner({ size = 'md', className }: SpinnerProps) {
+  const sizeClasses = {
+    sm: 'h-3.5 w-3.5',
+    md: 'h-4 w-4',
+    lg: 'h-5 w-5',
+  };
+
+  return (
+    <span
+      className={cn(
+        'hero-arrow-path animate-spin',
+        sizeClasses[size],
+        className
+      )}
+      aria-label="Loading"
+    />
+  );
+}

assets/js/collaborative-editor/utils/loadDTS.ts

@@ -0,0 +1,123 @@
+import { fetchDTSListing, fetchFile } from '@openfn/describe-package';
+
+import dts_es5 from '../../editor/lib/es5.min.dts';
+
+export type Lib = {
+  content: string;
+  filePath?: string;
+};
+
+/**
+ * Load TypeScript definition files for an adaptor from jsDelivr
+ *
+ * Fetches .d.ts files for the specified adaptor and @openfn/language-common,
+ * then wraps them in appropriate module declarations for Monaco editor.
+ *
+ * @param specifier - Fully qualified adaptor name (e.g., "@openfn/language-http@5.0.0")
+ * @returns Array of lib objects containing TypeScript definitions
+ *
+ * @example
+ * const libs = await loadDTS('@openfn/language-http@5.0.0');
+ * monaco.languages.typescript.javascriptDefaults.setExtraLibs(libs);
+ */
+export async function loadDTS(specifier: string): Promise<Lib[]> {
+  // Work out the module name from the specifier
+  // (this gets a bit tricky with @openfn/ module names)
+  const nameParts = specifier.split('@');
+  nameParts.pop(); // remove the version
+  const name = nameParts.join('@');
+
+  const results: Lib[] = [{ content: dts_es5 }];
+
+  // Load common into its own module
+  // TODO maybe we need other dependencies too? collections?
+  if (name !== '@openfn/language-common') {
+    const pkg = await fetchFile(`${specifier}/package.json`);
+    const commonVersion = (JSON.parse(pkg || '{}') as any).dependencies?.[
+      '@openfn/language-common'
+    ];
+
+    // jsDeliver doesn't appear to support semver range syntax (^1.0.0, 1.x, ~1.1.0)
+    const commonVersionMatch = commonVersion?.match(/^\d+\.\d+\.\d+/);
+    if (!commonVersionMatch) {
+      console.warn(
+        `@openfn/language-common@${commonVersion} contains semver range syntax.`
+      );
+    }
+
+    const commonSpecifier = `@openfn/language-common@${commonVersion.replace(
+      '^',
+      ''
+    )}`;
+    for await (const filePath of fetchDTSListing(commonSpecifier)) {
+      if (!filePath.startsWith('node_modules')) {
+        // Load every common typedef into the common module
+        let content = await fetchFile(`${commonSpecifier}${filePath}`);
+        content = content.replace(/\* +@(.+?)\*\//gs, '*/');
+        results.push({
+          content: `declare module '@openfn/language-common' { ${content} }`,
+        });
+      }
+    }
+  }
+
+  // This will store types.d.ts, if we can find it
+  let types = '';
+
+  // This stores string content for our adaptor
+  let adaptorDefs: string[] = [];
+
+  for await (const filePath of fetchDTSListing(specifier)) {
+    if (!filePath.startsWith('node_modules')) {
+      let content = await fetchFile(`${specifier}${filePath}`);
+      // Convert relative paths
+      content = content
+        .replace(/from '\.\//g, `from '${name}/`)
+        .replace(/import '\.\//g, `import '${name}/`);
+
+      // Remove js doc annotations
+      // this regex means: find a * then an @ (with 1+ space in between), then match everything up to a closing comment */
+      // content = content.replace(/\* +@(.+?)\*\//gs, '*/');
+
+      const fileName = filePath.split('/').at(-1)!.replace('.d.ts', '');
+
+      // Import the index as the global namespace - but take care to convert all paths to absolute
+      if (fileName === 'index' || fileName === 'Adaptor') {
+        // It turns out that "export * as " seems to straight up not work in Monaco
+        // So this little hack will refactor import statements in a way that works
+        content = content.replace(
+          /export \* as (\w+) from '(.+)';/g,
+          `
+
+          import * as $1 from '$2';
+          export { $1 };`
+        );
+        adaptorDefs.push(`declare namespace {
+  {{$TYPES}}
+  ${content}
+`);
+      } else if (fileName === 'types') {
+        types = content;
+      } else {
+        // Declare every other module as file
+        adaptorDefs.push(`declare module '${name}/${fileName}' {
+  {{$TYPES}}
+  ${content}
+}`);
+      }
+    }
+  }
+
+  // This just ensures that the global type defs appear in every scope
+  // This is basically a hack to work around https://github.com/OpenFn/lightning/issues/2641
+  // If we find a types.d.ts, append it to every other file
+  adaptorDefs = adaptorDefs.map(def => def.replace('{{$TYPES}}', types));
+
+  results.push(
+    ...adaptorDefs.map(content => ({
+      content,
+    }))
+  );
+
+  return results;
+}

assets/js/editor/Editor.tsx

@@ -323,6 +323,8 @@ export default function Editor({
     // This needs to be at the top level so that tooltips clip over Lightning UIs
     const overflowNode = document.createElement('div');
     overflowNode.className = 'monaco-editor widgets-overflow-container';
+    // Total hackage - acceptable given that the editor will be retired soon
+    overflowNode.style.zIndex = '9999';
     document.body.appendChild(overflowNode);
 
     setOptions({

assets/test/__mocks__/monaco-editor.ts

@@ -21,6 +21,16 @@ export const editor = {
   setModelLanguage: () => {},
 };
 
+export const languages = {
+  typescript: {
+    javascriptDefaults: {
+      setCompilerOptions: () => {},
+      setExtraLibs: () => {},
+    },
+  },
+  registerCompletionItemProvider: () => ({ dispose: () => {} }),
+};
+
 export const KeyMod = {
   CtrlCmd: 1,
   Shift: 2,
@@ -38,6 +48,7 @@ export const KeyCode = {
 // Export as default and named exports to match monaco-editor package
 export default {
   editor,
+  languages,
   KeyMod,
   KeyCode,
 };