more major websocket progress

12 files changed, 295 insertions, 194 deletions

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 705f935b..ef1a7d6b 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -7,7 +7,7 @@ settings:
 dependencies:
   decky-frontend-lib:
     specifier: 3.24.5
-    version: link:../../lib
+    version: 3.24.5
   filesize:
     specifier: ^10.0.7
     version: 10.0.7
@@ -1482,6 +1482,10 @@ packages:
     dependencies:
       ms: 2.1.2
 
+  /decky-frontend-lib@3.24.5:
+    resolution: {integrity: sha512-eYlbKDOOcIBPI0b76Rqvlryq2ym/QNiry4xf2pFrXmBa1f95dflqbQAb2gTq9uHEa5gFmeV4lUcMPGJ3M14Xqw==}
+    dev: false
+
   /decode-named-character-reference@1.0.2:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
     dependencies:
diff --git a/frontend/src/components/modals/filepicker/patches/library.ts b/frontend/src/components/modals/filepicker/patches/library.ts
index 076e78f6..71eb9541 100644
--- a/frontend/src/components/modals/filepicker/patches/library.ts
+++ b/frontend/src/components/modals/filepicker/patches/library.ts
@@ -1,6 +1,7 @@
 import { Patch, findModuleChild, replacePatch, sleep } from 'decky-frontend-lib';
 
 import Logger from '../../../../logger';
+import { FileSelectionType } from '..';
 
 const logger = new Logger('LibraryPatch');
 
@@ -13,7 +14,12 @@ function rePatch() {
       const details = window.appDetailsStore.GetAppDetails(appid);
       logger.debug('game details', details);
       // strShortcutStartDir
-      const file = await DeckyPluginLoader.openFilePicker(details?.strShortcutStartDir.replaceAll('"', '') || '/');
+      const file = await DeckyPluginLoader.openFilePicker(
+        FileSelectionType.FILE,
+        details?.strShortcutStartDir.replaceAll('"', '') || '/',
+        true,
+        true,
+      );
       logger.debug('user selected', file);
       window.SteamClient.Apps.SetShortcutExe(appid, JSON.stringify(file.path));
       const pathArr = file.path.split('/');
diff --git a/frontend/src/components/settings/pages/developer/index.tsx b/frontend/src/components/settings/pages/developer/index.tsx
index 9c8504e7..091e367e 100644
--- a/frontend/src/components/settings/pages/developer/index.tsx
+++ b/frontend/src/components/settings/pages/developer/index.tsx
@@ -28,7 +28,7 @@ const installFromZip = async () => {
     logger.error('The default path has not been found!');
     return;
   }
-  DeckyPluginLoader.openFilePickerV2(FileSelectionType.FILE, path, true, true, undefined, ['zip'], false, false).then(
+  DeckyPluginLoader.openFilePicker(FileSelectionType.FILE, path, true, true, undefined, ['zip'], false, false).then(
     (val) => {
       const url = `file://${val.path}`;
       console.log(`Installing plugin locally from ${url}`);
@@ -37,6 +37,8 @@ const installFromZip = async () => {
   );
 };
 
+const getTabID = DeckyBackend.callable<[name: string], string>('utilities/get_tab_id');
+
 export default function DeveloperSettings() {
   const [enableValveInternal, setEnableValveInternal] = useSetting<boolean>('developer.valve_internal', false);
   const [reactDevtoolsEnabled, setReactDevtoolsEnabled] = useSetting<boolean>('developer.rdt.enabled', false);
@@ -85,7 +87,7 @@ export default function DeveloperSettings() {
           <DialogButton
             onClick={async () => {
               try {
-                let tabId = await DeckyBackend.call<[name: string], string>('utilities/get_tab_id', 'SharedJSContext');
+                let tabId = await getTabID('SharedJSContext');
                 Navigation.NavigateToExternalWeb(
                   'localhost:8080/devtools/inspector.html?ws=localhost:8080/devtools/page/' + tabId,
                 );
diff --git a/frontend/src/components/settings/pages/general/Updater.tsx b/frontend/src/components/settings/pages/general/Updater.tsx
index c563bbca..3c7e53f1 100644
--- a/frontend/src/components/settings/pages/general/Updater.tsx
+++ b/frontend/src/components/settings/pages/general/Updater.tsx
@@ -75,12 +75,12 @@ export default function UpdaterSettings() {
   const { t } = useTranslation();
 
   useEffect(() => {
-    const a = DeckyBackend.addEventListener('frontend/update_download_percentage', (percentage) => {
+    const a = DeckyBackend.addEventListener('updater/update_download_percentage', (percentage) => {
       setUpdateProgress(percentage);
       setIsLoaderUpdating(true);
     });
 
-    const b = DeckyBackend.addEventListener('frontend/finish_download', () => {
+    const b = DeckyBackend.addEventListener('updater/finish_download', () => {
       setUpdateProgress(0);
       setReloading(true);
     });
diff --git a/frontend/src/components/settings/pages/testing/index.tsx b/frontend/src/components/settings/pages/testing/index.tsx
index 72267295..cdf51c71 100644
--- a/frontend/src/components/settings/pages/testing/index.tsx
+++ b/frontend/src/components/settings/pages/testing/index.tsx
@@ -1,4 +1,12 @@
-import { DialogBody, DialogButton, DialogControlsSection, Focusable, Navigation } from 'decky-frontend-lib';
+import {
+  DialogBody,
+  DialogButton,
+  DialogControlsSection,
+  Field,
+  Focusable,
+  Navigation,
+  SteamSpinner,
+} from 'decky-frontend-lib';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaDownload, FaInfo } from 'react-icons/fa';
@@ -19,13 +27,23 @@ const downloadTestingVersion = DeckyBackend.callable<[pr_id: number, sha: string
 export default function TestingVersionList() {
   const { t } = useTranslation();
   const [testingVersions, setTestingVersions] = useState<TestingVersion[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
     (async () => {
       setTestingVersions(await getTestingVersions());
+      setLoading(false);
     })();
   }, []);
 
+  if (loading) {
+    return (
+      <>
+        <SteamSpinner>{t('Testing.loading')}</SteamSpinner>
+      </>
+    );
+  }
+
   if (testingVersions.length === 0) {
     return (
       <div>
@@ -37,48 +55,54 @@ export default function TestingVersionList() {
   return (
     <DialogBody>
       <DialogControlsSection>
+        <h4>{t('Testing.header')}</h4>
         <ul style={{ listStyleType: 'none', padding: '0' }}>
           {testingVersions.map((version) => {
             return (
-              <li style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingBottom: '10px' }}>
-                <span>
-                  {version.name} <span style={{ opacity: '50%' }}>{'#' + version.id}</span>
-                </span>
-                <Focusable style={{ height: '40px', marginLeft: 'auto', display: 'flex' }}>
-                  <DialogButton
-                    style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
-                    onClick={() => {
-                      downloadTestingVersion(version.id, version.head_sha);
-                      setSetting('branch', UpdateBranch.Testing);
-                    }}
-                  >
-                    <div
+              <li>
+                <Field
+                  label={
+                    <>
+                      {version.name} <span style={{ opacity: '50%' }}>{'#' + version.id}</span>
+                    </>
+                  }
+                >
+                  <Focusable style={{ height: '40px', marginLeft: 'auto', display: 'flex' }}>
+                    <DialogButton
+                      style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
+                      onClick={() => {
+                        downloadTestingVersion(version.id, version.head_sha);
+                        setSetting('branch', UpdateBranch.Testing);
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: 'flex',
+                          minWidth: '150px',
+                          justifyContent: 'space-between',
+                          alignItems: 'center',
+                        }}
+                      >
+                        {t('Testing.download')}
+                        <FaDownload style={{ paddingLeft: '1rem' }} />
+                      </div>
+                    </DialogButton>
+                    <DialogButton
                       style={{
+                        height: '40px',
+                        width: '40px',
+                        padding: '10px 12px',
+                        minWidth: '40px',
                         display: 'flex',
-                        minWidth: '150px',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
                       }}
+                      onClick={() => Navigation.NavigateToExternalWeb(version.link)}
                     >
-                      {t('Testing.download')}
-                      <FaDownload style={{ paddingLeft: '1rem' }} />
-                    </div>
-                  </DialogButton>
-                  <DialogButton
-                    style={{
-                      height: '40px',
-                      width: '40px',
-                      padding: '10px 12px',
-                      minWidth: '40px',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      justifyContent: 'center',
-                    }}
-                    onClick={() => Navigation.NavigateToExternalWeb(version.link)}
-                  >
-                    <FaInfo />
-                  </DialogButton>
-                </Focusable>
+                      <FaInfo />
+                    </DialogButton>
+                  </Focusable>
+                </Field>
               </li>
             );
           })}
diff --git a/frontend/src/components/store/Store.tsx b/frontend/src/components/store/Store.tsx
index e3d1b0f1..fdb871b0 100644
--- a/frontend/src/components/store/Store.tsx
+++ b/frontend/src/components/store/Store.tsx
@@ -89,7 +89,7 @@ const BrowseTab: FC<{ setPluginCount: Dispatch<SetStateAction<number | null>> }>
   useEffect(() => {
     (async () => {
       const res = await getPluginList(selectedSort[0], selectedSort[1]);
-      logger.log('got data!', res);
+      logger.debug('got data!', res);
       setPluginList(res);
       setPluginCount(res.length);
     })();
@@ -98,7 +98,7 @@ const BrowseTab: FC<{ setPluginCount: Dispatch<SetStateAction<number | null>> }>
   useEffect(() => {
     (async () => {
       const storeRes = await getStore();
-      logger.log(`store is ${storeRes}, isTesting is ${storeRes === Store.Testing}`);
+      logger.debug(`store is ${storeRes}, isTesting is ${storeRes === Store.Testing}`);
       setIsTesting(storeRes === Store.Testing);
     })();
   }, []);
diff --git a/frontend/src/plugin-loader.tsx b/frontend/src/plugin-loader.tsx
index 43073385..fd5762ea 100644
--- a/frontend/src/plugin-loader.tsx
+++ b/frontend/src/plugin-loader.tsx
@@ -2,7 +2,6 @@ import {
   ModalRoot,
   PanelSection,
   PanelSectionRow,
-  Patch,
   QuickAccessTab,
   Router,
   findSP,
@@ -26,7 +25,7 @@ import { FrozenPluginService } from './frozen-plugins-service';
 import { HiddenPluginsService } from './hidden-plugins-service';
 import Logger from './logger';
 import { NotificationService } from './notification-service';
-import { InstallType, Plugin } from './plugin';
+import { InstallType, Plugin, PluginLoadType } from './plugin';
 import RouterHook from './router-hook';
 import { deinitSteamFixes, initSteamFixes } from './steamfixes';
 import { checkForPluginUpdates } from './store';
@@ -41,6 +40,18 @@ const SettingsPage = lazy(() => import('./components/settings'));
 
 const FilePicker = lazy(() => import('./components/modals/filepicker'));
 
+declare global {
+  interface Window {
+    __DECKY_SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_deckyPluginBackendAPIInit?: {
+      connect: (version: number, key: string) => any; // Returns the backend API used above, no real point adding types to this.
+    };
+  }
+}
+
+const callPluginMethod = DeckyBackend.callable<[pluginName: string, method: string, ...args: any], any>(
+  'loader/call_plugin_method',
+);
+
 class PluginLoader extends Logger {
   private plugins: Plugin[] = [];
   private tabsHook: TabsHook = new TabsHook();
@@ -55,11 +66,21 @@ class PluginLoader extends Logger {
   private reloadLock: boolean = false;
   // stores a list of plugin names which requested to be reloaded
   private pluginReloadQueue: { name: string; version?: string }[] = [];
-
-  private focusWorkaroundPatch?: Patch;
+  private apiKeys: Map<string, string> = new Map();
 
   constructor() {
     super(PluginLoader.name);
+    console.log(import.meta.url);
+
+    DeckyBackend.addEventListener('loader/notify_updates', this.notifyUpdates.bind(this));
+    DeckyBackend.addEventListener('loader/import_plugin', this.importPlugin.bind(this));
+    DeckyBackend.addEventListener('loader/unload_plugin', this.unloadPlugin.bind(this));
+    DeckyBackend.addEventListener('loader/add_plugin_install_prompt', this.addPluginInstallPrompt.bind(this));
+    DeckyBackend.addEventListener(
+      'loader/add_multiple_plugins_install_prompt',
+      this.addMultiplePluginsInstallPrompt.bind(this),
+    );
+
     this.tabsHook.init();
 
     const TabBadge = () => {
@@ -108,7 +129,10 @@ class PluginLoader extends Logger {
       .then(() => this.log('Initialized'));
   }
 
-  private getPluginsFromBackend = DeckyBackend.callable<[], { name: string; version: string }[]>('loader/get_plugins');
+  private getPluginsFromBackend = DeckyBackend.callable<
+    [],
+    { name: string; version: string; load_type: PluginLoadType }[]
+  >('loader/get_plugins');
 
   private async loadPlugins() {
     // wait for SP window to exist before loading plugins
@@ -119,7 +143,8 @@ class PluginLoader extends Logger {
     const pluginLoadPromises = [];
     const loadStart = performance.now();
     for (const plugin of plugins) {
-      if (!this.hasPlugin(plugin.name)) pluginLoadPromises.push(this.importPlugin(plugin.name, plugin.version, false));
+      if (!this.hasPlugin(plugin.name))
+        pluginLoadPromises.push(this.importPlugin(plugin.name, plugin.version, plugin.load_type, false));
     }
     await Promise.all(pluginLoadPromises);
     const loadEnd = performance.now();
@@ -256,7 +281,6 @@ class PluginLoader extends Logger {
     this.routerHook.removeRoute('/decky/settings');
     deinitSteamFixes();
     deinitFilepickerPatches();
-    this.focusWorkaroundPatch?.unpatch();
   }
 
   public unloadPlugin(name: string) {
@@ -266,7 +290,12 @@ class PluginLoader extends Logger {
     this.deckyState.setPlugins(this.plugins);
   }
 
-  public async importPlugin(name: string, version?: string | undefined, useQueue: boolean = true) {
+  public async importPlugin(
+    name: string,
+    version?: string | undefined,
+    loadType: PluginLoadType = PluginLoadType.ESMODULE_V1,
+    useQueue: boolean = true,
+  ) {
     if (useQueue && this.reloadLock) {
       this.log('Reload currently in progress, adding to queue', name);
       this.pluginReloadQueue.push({ name, version: version });
@@ -279,7 +308,7 @@ class PluginLoader extends Logger {
 
       this.unloadPlugin(name);
       const startTime = performance.now();
-      await this.importReactPlugin(name, version);
+      await this.importReactPlugin(name, version, loadType);
       const endTime = performance.now();
 
       this.deckyState.setPlugins(this.plugins);
@@ -297,70 +326,94 @@ class PluginLoader extends Logger {
     }
   }
 
-  private async importReactPlugin(name: string, version?: string) {
-    let res = await fetch(`http://127.0.0.1:1337/plugins/${name}/frontend_bundle`, {
-      credentials: 'include',
-      headers: {
-        Authentication: deckyAuthToken,
-      },
-    });
-
-    if (res.ok) {
-      try {
-        let plugin_export = await eval(await res.text());
-        let plugin = plugin_export(this.createPluginAPI(name));
-        this.plugins.push({
-          ...plugin,
-          name: name,
-          version: version,
-        });
-      } catch (e) {
-        this.error('Error loading plugin ' + name, e);
-        const TheError: FC<{}> = () => (
-          <PanelSection>
-            <PanelSectionRow>
-              <div
-                className={quickAccessMenuClasses.FriendsTitle}
-                style={{ display: 'flex', justifyContent: 'center' }}
-              >
-                <TranslationHelper trans_class={TranslationClass.PLUGIN_LOADER} trans_text="error" />
-              </div>
-            </PanelSectionRow>
-            <PanelSectionRow>
-              <pre style={{ overflowX: 'scroll' }}>
-                <code>{e instanceof Error ? e.stack : JSON.stringify(e)}</code>
-              </pre>
-            </PanelSectionRow>
-            <PanelSectionRow>
-              <div className={quickAccessMenuClasses.Text}>
-                <TranslationHelper
-                  trans_class={TranslationClass.PLUGIN_LOADER}
-                  trans_text="plugin_error_uninstall"
-                  i18n_args={{ name: name }}
-                />
-              </div>
-            </PanelSectionRow>
-          </PanelSection>
-        );
-        this.plugins.push({
-          name: name,
-          version: version,
-          content: <TheError />,
-          icon: <FaExclamationCircle />,
-        });
-        this.toaster.toast({
-          title: (
-            <TranslationHelper
-              trans_class={TranslationClass.PLUGIN_LOADER}
-              trans_text="plugin_load_error.toast"
-              i18n_args={{ name: name }}
-            />
-          ),
-          body: '' + e,
-          icon: <FaExclamationCircle />,
-        });
+  private async importReactPlugin(
+    name: string,
+    version?: string,
+    loadType: PluginLoadType = PluginLoadType.ESMODULE_V1,
+  ) {
+    try {
+      switch (loadType) {
+        case PluginLoadType.ESMODULE_V1:
+          const uuid = this.initPluginBackendAPIConnection(name);
+          let plugin_export: () => Plugin;
+          try {
+            plugin_export = await import(`http://127.0.0.1:1337/plugins/${name}/dist/index.js#apiKey=${uuid}`);
+          } finally {
+            this.destroyPluginBackendAPIConnection(uuid);
+          }
+          let plugin = plugin_export();
+
+          this.plugins.push({
+            ...plugin,
+            name: name,
+            version: version,
+          });
+          break;
+
+        case PluginLoadType.LEGACY_EVAL_IIFE:
+          let res = await fetch(`http://127.0.0.1:1337/plugins/${name}/frontend_bundle`, {
+            credentials: 'include',
+            headers: {
+              Authentication: deckyAuthToken,
+            },
+          });
+          if (res.ok) {
+            let plugin_export: (serverAPI: any) => Plugin = await eval(await res.text());
+            let plugin = plugin_export(this.createLegacyPluginAPI(name));
+            this.plugins.push({
+              ...plugin,
+              name: name,
+              version: version,
+            });
+          } else throw new Error(`${name} frontend_bundle not OK`);
+          break;
+
+        default:
+          throw new Error(`${name} has no defined loadType.`);
       }
-    } else throw new Error(`${name} frontend_bundle not OK`);
+    } catch (e) {
+      this.error('Error loading plugin ' + name, e);
+      const TheError: FC<{}> = () => (
+        <PanelSection>
+          <PanelSectionRow>
+            <div className={quickAccessMenuClasses.FriendsTitle} style={{ display: 'flex', justifyContent: 'center' }}>
+              <TranslationHelper trans_class={TranslationClass.PLUGIN_LOADER} trans_text="error" />
+            </div>
+          </PanelSectionRow>
+          <PanelSectionRow>
+            <pre style={{ overflowX: 'scroll' }}>
+              <code>{e instanceof Error ? e.stack : JSON.stringify(e)}</code>
+            </pre>
+          </PanelSectionRow>
+          <PanelSectionRow>
+            <div className={quickAccessMenuClasses.Text}>
+              <TranslationHelper
+                trans_class={TranslationClass.PLUGIN_LOADER}
+                trans_text="plugin_error_uninstall"
+                i18n_args={{ name: name }}
+              />
+            </div>
+          </PanelSectionRow>
+        </PanelSection>
+      );
+      this.plugins.push({
+        name: name,
+        version: version,
+        content: <TheError />,
+        icon: <FaExclamationCircle />,
+      });
+      this.toaster.toast({
+        title: (
+          <TranslationHelper
+            trans_class={TranslationClass.PLUGIN_LOADER}
+            trans_text="plugin_load_error.toast"
+            i18n_args={{ name: name }}
+          />
+        ),
+        body: '' + e,
+        icon: <FaExclamationCircle />,
+      });
+    }
   }
 
   async callServerMethod(methodName: string, args = {}) {
@@ -374,20 +427,20 @@ class PluginLoader extends Logger {
     );
   }
 
-  openFilePicker(
+  openFilePickerLegacy(
     startPath: string,
     selectFiles?: boolean,
     regex?: RegExp,
   ): Promise<{ path: string; realpath: string }> {
     this.warn('openFilePicker is deprecated and will be removed. Please migrate to openFilePickerV2');
     if (selectFiles) {
-      return this.openFilePickerV2(FileSelectionType.FILE, startPath, true, true, regex);
+      return this.openFilePicker(FileSelectionType.FILE, startPath, true, true, regex);
     } else {
-      return this.openFilePickerV2(FileSelectionType.FOLDER, startPath, false, true, regex);
+      return this.openFilePicker(FileSelectionType.FOLDER, startPath, false, true, regex);
     }
   }
 
-  openFilePickerV2(
+  openFilePicker(
     select: FileSelectionType,
     startPath: string,
     includeFiles?: boolean,
@@ -428,27 +481,84 @@ class PluginLoader extends Logger {
     });
   }
 
-  createPluginAPI(pluginName: string) {
-    const pluginAPI = {
-      backend: {
-        call<Args extends any[] = any[], Return = void>(method: string, ...args: Args): Promise<Return> {
-          return DeckyBackend.call<[pluginName: string, method: string, ...args: Args], Return>(
-            'loader/call_plugin_method',
-            pluginName,
-            method,
-            ...args,
-          );
-        },
-        callable<Args extends any[] = any[], Return = void>(method: string): (...args: Args) => Promise<Return> {
-          return (...args) => pluginAPI.backend.call<Args, Return>(method, ...args);
-        },
+  /* TODO replace with the following flow (or similar) so we can reuse the JS Fetch API
+        frontend --request URL only--> backend (ws method)
+        backend --new temporary backend URL--> frontend (ws response)
+        frontend <--> backend <--> target URL (over http!)
+      */
+  async fetchNoCors(url: string, request: any = {}) {
+    let method: string;
+    const req = { headers: {}, ...request, data: request.body };
+    req?.body && delete req.body;
+    if (!request.method) {
+      method = 'POST';
+    } else {
+      method = request.method;
+      delete req.method;
+    }
+    // this is terrible but a. we're going to redo this entire method anyway and b. it was already terrible
+    try {
+      const ret = await DeckyBackend.call<
+        [method: string, url: string, extra_opts?: any],
+        { status: number; headers: { [key: string]: string }; body: string }
+      >('utilities/http_request', method, url, req);
+      return { success: true, result: ret };
+    } catch (e) {
+      return { success: false, result: e?.toString() };
+    }
+  }
+
+  destroyPluginBackendAPIConnection(uuid: string) {
+    if (this.apiKeys.delete(uuid)) {
+      this.debug(`backend api connection init data destroyed for ${uuid}`);
+    }
+  }
+
+  initPluginBackendAPI() {
+    // Things will break *very* badly if plugin code touches this outside of @decky/backend, so lets make that clear.
+    window.__DECKY_SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_deckyPluginBackendAPIInit = {
+      connect: (version: number, key: string) => {
+        if (!this.apiKeys.has(key)) {
+          throw new Error(`Backend API key ${key} is invalid.`);
+        }
+
+        const pluginName = this.apiKeys.get(key)!;
+
+        if (version <= 0) {
+          this.destroyPluginBackendAPIConnection(key);
+          throw new Error(`UUID ${key} requested invalid backend api version ${version}.`);
+        }
+
+        const backendAPI = {
+          call: (methodName: string, ...args: any) => {
+            return callPluginMethod(pluginName, methodName, ...args);
+          },
+          callable: (methodName: string) => {
+            return (...args: any) => callPluginMethod(pluginName, methodName, ...args);
+          },
+        };
+
+        this.destroyPluginBackendAPIConnection(key);
+        return backendAPI;
       },
+    };
+  }
+
+  initPluginBackendAPIConnection(pluginName: string) {
+    const key = crypto.randomUUID();
+    this.apiKeys.set(key, pluginName);
+
+    return key;
+  }
+
+  createLegacyPluginAPI(pluginName: string) {
+    const pluginAPI = {
       routerHook: this.routerHook,
       toaster: this.toaster,
       // Legacy
       callServerMethod: this.callServerMethod,
-      openFilePicker: this.openFilePicker,
-      openFilePickerV2: this.openFilePickerV2,
+      openFilePicker: this.openFilePickerLegacy,
+      openFilePickerV2: this.openFilePicker,
       // Legacy
       async callPluginMethod(methodName: string, args = {}) {
         return DeckyBackend.call<[pluginName: string, methodName: string, kwargs: any], any>(
@@ -458,32 +568,7 @@ class PluginLoader extends Logger {
           args,
         );
       },
-      /* TODO replace with the following flow (or similar) so we can reuse the JS Fetch API
-        frontend --request URL only--> backend (ws method)
-        backend --new temporary backend URL--> frontend (ws response)
-        frontend <--> backend <--> target URL (over http!)
-      */
-      async fetchNoCors(url: string, request: any = {}) {
-        let method: string;
-        const req = { headers: {}, ...request, data: request.body };
-        req?.body && delete req.body;
-        if (!request.method) {
-          method = 'POST';
-        } else {
-          method = request.method;
-          delete req.method;
-        }
-        // this is terrible but a. we're going to redo this entire method anyway and b. it was already terrible
-        try {
-          const ret = await DeckyBackend.call<
-            [method: string, url: string, extra_opts?: any],
-            { status: number; headers: { [key: string]: string }; body: string }
-          >('utilities/http_request', method, url, req);
-          return { success: true, result: ret };
-        } catch (e) {
-          return { success: false, result: e?.toString() };
-        }
-      },
+      fetchNoCors: this.fetchNoCors,
       executeInTab: DeckyBackend.callable<
         [tab: String, runAsync: Boolean, code: string],
         { success: boolean; result: any }
diff --git a/frontend/src/plugin.ts b/frontend/src/plugin.ts
index d750a63e..92a0c625 100644
--- a/frontend/src/plugin.ts
+++ b/frontend/src/plugin.ts
@@ -1,3 +1,8 @@
+export enum PluginLoadType {
+  LEGACY_EVAL_IIFE = 0, // legacy, uses legacy serverAPI
+  ESMODULE_V1 = 1, // esmodule loading with modern @decky/backend apis
+}
+
 export interface Plugin {
   name: string;
   version?: string;
diff --git a/frontend/src/start.tsx b/frontend/src/start.tsx
index 0803f46e..a2837a1b 100644
--- a/frontend/src/start.tsx
+++ b/frontend/src/start.tsx
@@ -6,7 +6,6 @@ import PluginLoader from './plugin-loader';
 
 declare global {
   export var DeckyPluginLoader: PluginLoader;
-  export var importDeckyPlugin: Function;
   export var deckyHasLoaded: boolean;
   export var deckyHasConnectedRDT: boolean | undefined;
   export var deckyAuthToken: string;
@@ -45,9 +44,7 @@ declare global {
   window?.DeckyPluginLoader?.deinit();
   window.DeckyPluginLoader = new PluginLoader();
   DeckyPluginLoader.init();
-  window.importDeckyPlugin = function (name: string, version: string) {
-    DeckyPluginLoader?.importPlugin(name, version);
-  };
+  console.log(import.meta.url);
 })();
 
 export default i18n;
diff --git a/frontend/src/steamfixes/index.ts b/frontend/src/steamfixes/index.ts
index fe0e3e05..45f07b2a 100644
--- a/frontend/src/steamfixes/index.ts
+++ b/frontend/src/steamfixes/index.ts
@@ -1,5 +1,5 @@
-import reloadFix from './reload';
-import restartFix from './restart';
+// import reloadFix from './reload';
+// import restartFix from './restart';
 let fixes: Function[] = [];
 
 export function deinitSteamFixes() {
@@ -7,6 +7,6 @@ export function deinitSteamFixes() {
 }
 
 export async function initSteamFixes() {
-  fixes.push(await reloadFix());
-  fixes.push(await restartFix());
+  // fixes.push(await reloadFix());
+  // fixes.push(await restartFix());
 }
diff --git a/frontend/src/updater.ts b/frontend/src/updater.ts
index edc9eeb3..c8e96521 100644
--- a/frontend/src/updater.ts
+++ b/frontend/src/updater.ts
@@ -28,6 +28,6 @@ export const doRestart = DeckyBackend.callable('updater/do_restart');
 export const getVersionInfo = DeckyBackend.callable<[], VerInfo>('updater/get_version_info');
 export const checkForUpdates = DeckyBackend.callable<[], VerInfo>('updater/check_for_updates');
 
-DeckyBackend.addEventListener('frontend/finish_download', async () => {
+DeckyBackend.addEventListener('updater/finish_download', async () => {
   await doRestart();
 });
diff --git a/frontend/src/wsrouter.ts b/frontend/src/wsrouter.ts
index 778c03bf..37df4262 100644
--- a/frontend/src/wsrouter.ts
+++ b/frontend/src/wsrouter.ts
@@ -50,7 +50,6 @@ interface PromiseResolver<T> {
 }
 
 export class WSRouter extends Logger {
-  routes: Map<string, (...args: any) => any> = new Map();
   runningCalls: Map<number, PromiseResolver<any>> = new Map();
   eventListeners: Map<string, Set<(...args: any) => any>> = new Map();
   ws?: WebSocket;
@@ -92,14 +91,6 @@ export class WSRouter extends Logger {
     this.ws?.send(JSON.stringify(data));
   }
 
-  addRoute(name: string, route: (...args: any) => any) {
-    this.routes.set(name, route);
-  }
-
-  removeRoute(name: string) {
-    this.routes.delete(name);
-  }
-
   addEventListener(event: string, listener: (...args: any) => any) {
     if (!this.eventListeners.has(event)) {
       this.eventListeners.set(event, new Set([listener]));
@@ -123,20 +114,6 @@ export class WSRouter extends Logger {
     try {
       const data = JSON.parse(msg.data) as Message;
       switch (data.type) {
-        case MessageType.CALL:
-          if (this.routes.has(data.route)) {
-            try {
-              const res = await this.routes.get(data.route)!(...data.args);
-              this.write({ type: MessageType.REPLY, id: data.id, result: res });
-              this.debug(`Started JS call ${data.route} ID ${data.id}`);
-            } catch (e) {
-              await this.write({ type: MessageType.ERROR, id: data.id, error: (e as Error)?.stack || e });
-            }
-          } else {
-            await this.write({ type: MessageType.ERROR, id: data.id, error: `Route ${data.route} does not exist.` });
-          }
-          break;
-
         case MessageType.REPLY:
           if (this.runningCalls.has(data.id)) {
             this.runningCalls.get(data.id)!.resolve(data.result);
@@ -154,6 +131,7 @@ export class WSRouter extends Logger {
           break;
 
         case MessageType.EVENT:
+          this.debug(`Recieved event ${data.event} with args`, data.args);
           if (this.eventListeners.has(data.event)) {
             for (const listener of this.eventListeners.get(data.event)!) {
               (async () => {