remove ver suffix

* initial fixes: everything working except toasts and patch notes

* tabshook changes, disable toaster for now

* prettier

* oops

* implement custom toaster because I am tired of Valve's shit

also fix QAM not injecting sometimes

* remove extra logging

* add findSP, fix patch notes, fix vscode screwup

* fix patch notes

* show error when plugin frontends fail to load

* add get_tab_lambda

* add css and has_element helpers to Tab

* small modals fixup

* Don't forceUpdate QuickAccess on stable

* add routes prop used to get tabs component

* add more dev utils to DFL global

.github/workflows/build.yml

@@ -47,15 +47,15 @@ jobs:
       with:
         node-version: 18
       
-    - name: Set up Python 3.10 🐍
-      uses: actions/setup-python@v3
+    - name: Set up Python 3.10.2 🐍
+      uses: actions/setup-python@v4
       with:
-        python-version: "3.10"
+        python-version: "3.10.2"
         
     - name: Install Python dependencies ⬇️
       run: |
         python -m pip install --upgrade pip
-        pip install pyinstaller
+        pip install pyinstaller==5.5
         [ -f requirements.txt ] && pip install -r requirements.txt
 
     - name: Install JS dependencies ⬇️
@@ -146,7 +146,7 @@ jobs:
           fi
         fi
         echo "vOUT: v$OUT"
-        echo ::set-output name=tag_name::v$OUT
+        echo tag_name=v$OUT >> $GITHUB_OUTPUT
 
     - name: Push tag 📤
       uses: rickstaa/action-create-tag@v1.3.2
@@ -228,14 +228,12 @@ jobs:
           else
             printf "type not selected, defaulting to new pre-release only\n"
             printf "bumping prerel\n"
-            OUT="$VERSION-pre"
-            printf "OUT: ${OUT}\n"
-            OUT=$(semver bump prerel "$OUT")
+            OUT=$(semver bump prerel "$VERSION")
             printf "OUT: ${OUT}\n"
           fi
         fi
         printf "vOUT: v${OUT}\n"
-        echo ::set-output name=tag_name::v$OUT
+        echo tag_name=v$OUT >> $GITHUB_OUTPUT
 
     - name: Push tag 📤
       uses: rickstaa/action-create-tag@v1.3.2

.vscode/tasks.json

@@ -128,7 +128,7 @@
                 "isDefault": true
             },
             "dependsOn": [
-                "buildall",
+                "buildfrontend",
                 "deploy",
                 "runpydeck"
             ],

backend/browser.py

@@ -16,7 +16,7 @@ from zipfile import ZipFile
 
 # Local modules
 from helpers import get_ssl_context, get_user, get_user_group, download_remote_binary_to_path
-from injector import get_tab, inject_to_tab
+from injector import get_gamepadui_tab
 
 logger = getLogger("Browser")
 
@@ -57,7 +57,7 @@ class PluginBrowser:
             if access(packageJsonPath, R_OK):
                 with open(packageJsonPath, 'r') as f:
                     packageJson = json.load(f)
-                    if len(packageJson["remote_binary"]) > 0:
+                    if "remote_binary" in packageJson and len(packageJson["remote_binary"]) > 0:
                         # create bin directory if needed.
                         rc=call(["chmod", "-R", "777", pluginBasePath])
                         if access(pluginBasePath, W_OK):
@@ -97,14 +97,14 @@ class PluginBrowser:
                     plugin = json.load(f)
 
                 if plugin['name'] == name:
-                    return path.join(self.plugin_path, folder)
+                    return str(path.join(self.plugin_path, folder))
             except:
                 logger.debug(f"skipping {folder}")
 
     async def uninstall_plugin(self, name):
         if self.loader.watcher:
             self.loader.watcher.disabled = True
-        tab = await get_tab("SP")
+        tab = await get_gamepadui_tab()
         try:
             logger.info("uninstalling " + name)
             logger.info(" at dir " + self.find_plugin_folder(name))
@@ -124,12 +124,15 @@ class PluginBrowser:
             self.loader.watcher.disabled = False
 
     async def _install(self, artifact, name, version, hash):
+        isInstalled = False
         if self.loader.watcher:
             self.loader.watcher.disabled = True
         try:
-            await self.uninstall_plugin(name)
+            pluginFolderPath = self.find_plugin_folder(name)
+            if pluginFolderPath:
+                isInstalled = True
         except:
-            logger.error(f"Plugin {name} not installed, skipping uninstallation")
+            logger.error(f"Failed to determine if {name} is already installed, continuing anyway.")
         logger.info(f"Installing {name} (Version: {version})")
         async with ClientSession() as client:
             logger.debug(f"Fetching {artifact}")
@@ -139,6 +142,12 @@ class PluginBrowser:
                 data = await res.read()
                 logger.debug(f"Read {len(data)} bytes")
                 res_zip = BytesIO(data)
+                if isInstalled:
+                    try:
+                        logger.debug("Uninstalling existing plugin...")
+                        await self.uninstall_plugin(name)
+                    except:
+                        logger.error(f"Plugin {name} could not be uninstalled.")
                 logger.debug("Unzipping...")
                 ret = self._unzip_to_plugin_dir(res_zip, name, hash)
                 if ret:
@@ -151,7 +160,6 @@ class PluginBrowser:
                             self.loader.plugins.pop(name, None)
                         await sleep(1)
                         self.loader.import_plugin(path.join(plugin_dir, "main.py"), plugin_dir)
-                        # await inject_to_tab("SP", "window.syncDeckyPlugins()")
                     else:
                         logger.fatal(f"Failed Downloading Remote Binaries")
                 else:
@@ -164,7 +172,7 @@ class PluginBrowser:
     async def request_plugin_install(self, artifact, name, version, hash):
         request_id = str(time())
         self.install_requests[request_id] = PluginInstallContext(artifact, name, version, hash)
-        tab = await get_tab("SP")
+        tab = await get_gamepadui_tab()
         await tab.open_websocket()
         await tab.evaluate_js(f"DeckyPluginLoader.addPluginInstallPrompt('{name}', '{version}', '{request_id}', '{hash}')")
 

backend/injector.py

@@ -1,20 +1,26 @@
-#Injector code from https://github.com/SteamDeckHomebrew/steamdeck-ui-inject. More info on how it works there.
+# Injector code from https://github.com/SteamDeckHomebrew/steamdeck-ui-inject. More info on how it works there.
 
 from asyncio import sleep
-from logging import debug, getLogger
+from logging import getLogger
 from traceback import format_exc
+from typing import List
 
 from aiohttp import ClientSession
 from aiohttp.client_exceptions import ClientConnectorError
+import uuid
 
 BASE_ADDRESS = "http://localhost:8080"
 
 logger = getLogger("Injector")
 
+
 class Tab:
+    cmd_id = 0
+
     def __init__(self, res) -> None:
         self.title = res["title"]
         self.id = res["id"]
+        self.url = res["url"]
         self.ws_url = res["webSocketDebuggerUrl"]
 
         self.websocket = None
@@ -24,14 +30,24 @@ class Tab:
         self.client = ClientSession()
         self.websocket = await self.client.ws_connect(self.ws_url)
 
+    async def close_websocket(self):
+        await self.client.close()
+
     async def listen_for_message(self):
         async for message in self.websocket:
-            yield message
+            data = message.json()
+            yield data
 
     async def _send_devtools_cmd(self, dc, receive=True):
         if self.websocket:
+            self.cmd_id += 1
+            dc["id"] = self.cmd_id
             await self.websocket.send_json(dc)
-            return (await self.websocket.receive_json()) if receive else None
+            if receive:
+                async for msg in self.listen_for_message():
+                    if "id" in msg and msg["id"] == dc["id"]:
+                        return msg
+            return None
         raise RuntimeError("Websocket not opened")
 
     async def evaluate_js(self, js, run_async=False, manage_socket=True, get_result=True):
@@ -39,7 +55,6 @@ class Tab:
             await self.open_websocket()
 
         res = await self._send_devtools_cmd({
-            "id": 1,
             "method": "Runtime.evaluate",
             "params": {
                 "expression": js,
@@ -49,9 +64,269 @@ class Tab:
         }, get_result)
 
         if manage_socket:
-            await self.client.close()
+            await self.close_websocket()
         return res
 
+    async def has_global_var(self, var_name, manage_socket=True):
+        res = await self.evaluate_js(f"window['{var_name}'] !== null && window['{var_name}'] !== undefined", False, manage_socket)
+
+        if not "result" in res or not "result" in res["result"] or not "value" in res["result"]["result"]:
+            return False
+
+        return res["result"]["result"]["value"]
+
+    async def close(self, manage_socket=True):
+        if manage_socket:
+            await self.open_websocket()
+
+        res = await self._send_devtools_cmd({
+            "method": "Page.close",
+        }, False)
+
+        if manage_socket:
+            await self.close_websocket()
+        return res
+
+    async def enable(self):
+        """
+        Enables page domain notifications.
+        """
+        await self._send_devtools_cmd({
+            "method": "Page.enable",
+        }, False)
+
+    async def disable(self):
+        """
+        Disables page domain notifications.
+        """
+        await self._send_devtools_cmd({
+            "method": "Page.disable",
+        }, False)
+
+    async def refresh(self):
+        if manage_socket:
+            await self.open_websocket()
+
+        await self._send_devtools_cmd({
+            "method": "Page.reload",
+        }, False)
+
+        if manage_socket:
+            await self.close_websocket()
+
+        return
+    async def reload_and_evaluate(self, js, manage_socket=True):
+        """
+        Reloads the current tab, with JS to run on load via debugger
+        """
+        if manage_socket:
+            await self.open_websocket()
+
+        await self._send_devtools_cmd({
+            "method": "Debugger.enable"
+        }, True)
+
+        await self._send_devtools_cmd({
+            "method": "Runtime.evaluate",
+            "params": {
+                "expression": "location.reload();",
+                "userGesture": True,
+                "awaitPromise": False
+            }
+        }, False)
+
+        breakpoint_res = await self._send_devtools_cmd({
+            "method": "Debugger.setInstrumentationBreakpoint",
+            "params": {
+                "instrumentation": "beforeScriptExecution"
+            }
+        }, True)
+
+        logger.info(breakpoint_res)
+        
+        # Page finishes loading when breakpoint hits
+
+        for x in range(20):
+            # this works around 1/5 of the time, so just send it 8 times.
+            # the js accounts for being injected multiple times allowing only one instance to run at a time anyway
+            await self._send_devtools_cmd({
+                "method": "Runtime.evaluate",
+                "params": {
+                    "expression": js,
+                    "userGesture": True,
+                    "awaitPromise": False
+                }
+            }, False)
+
+        await self._send_devtools_cmd({
+            "method": "Debugger.removeBreakpoint",
+            "params": {
+                "breakpointId": breakpoint_res["result"]["breakpointId"]
+            }
+        }, False)
+
+        for x in range(4):
+            await self._send_devtools_cmd({
+                "method": "Debugger.resume"
+            }, False)
+
+        await self._send_devtools_cmd({
+            "method": "Debugger.disable"
+        }, True)
+
+        if manage_socket:
+            await self.close_websocket()
+        return
+
+    async def add_script_to_evaluate_on_new_document(self, js, add_dom_wrapper=True, manage_socket=True, get_result=True):
+        """
+        How the underlying call functions is not particularly clear from the devtools docs, so stealing puppeteer's description:
+
+        Adds a function which would be invoked in one of the following scenarios:
+        * whenever the page is navigated
+        * whenever the child frame is attached or navigated. In this case, the
+          function is invoked in the context of the newly attached frame.
+
+        The function is invoked after the document was created but before any of
+        its scripts were run. This is useful to amend the JavaScript environment,
+        e.g. to seed `Math.random`.
+
+        Parameters
+        ----------
+        js : str
+            The script to evaluate on new document
+        add_dom_wrapper : bool
+            True to wrap the script in a wait for the 'DOMContentLoaded' event.
+            DOM will usually not exist when this execution happens,
+            so it is necessary to delay til DOM is loaded if you are modifying it
+        manage_socket : bool
+            True to have this function handle opening/closing the websocket for this tab
+        get_result : bool
+            True to wait for the result of this call
+
+        Returns
+        -------
+        int or None
+            The identifier of the script added, used to remove it later.
+            (see remove_script_to_evaluate_on_new_document below)
+            None is returned if `get_result` is False
+        """
+
+        wrappedjs = """
+        function scriptFunc() {
+            {js}
+        }
+        if (document.readyState === 'loading') {
+            addEventListener('DOMContentLoaded', () => {
+            scriptFunc();
+        });
+        } else {
+            scriptFunc();
+        }
+        """.format(js=js) if add_dom_wrapper else js
+
+        if manage_socket:
+            await self.open_websocket()
+
+        res = await self._send_devtools_cmd({
+            "method": "Page.addScriptToEvaluateOnNewDocument",
+            "params": {
+                "source": wrappedjs
+            }
+        }, get_result)
+
+        if manage_socket:
+            await self.close_websocket()
+        return res
+
+    async def remove_script_to_evaluate_on_new_document(self, script_id, manage_socket=True):
+        """
+        Removes a script from a page that was added with `add_script_to_evaluate_on_new_document`
+
+        Parameters
+        ----------
+        script_id : int
+            The identifier of the script to remove (returned from `add_script_to_evaluate_on_new_document`)
+        """
+
+        if manage_socket:
+            await self.open_websocket()
+
+        res = await self._send_devtools_cmd({
+            "method": "Page.removeScriptToEvaluateOnNewDocument",
+            "params": {
+                "identifier": script_id
+            }
+        }, False)
+
+        if manage_socket:
+            await self.close_websocket()
+
+    async def has_element(self, element_name, manage_socket=True):
+        res = await self.evaluate_js(f"document.getElementById('{element_name}') != null", False, manage_socket)
+
+        if not "result" in res or not "result" in res["result"] or not "value" in res["result"]["result"]:
+            return False
+
+        return res["result"]["result"]["value"]
+
+    async def inject_css(self, style, manage_socket=True):
+        try:
+            css_id = str(uuid.uuid4())
+
+            result = await self.evaluate_js(
+                f"""
+                (function() {{
+                    const style = document.createElement('style');
+                    style.id = "{css_id}";
+                    document.head.append(style);
+                    style.textContent = `{style}`;
+                }})()
+                """, False, manage_socket)
+
+            if "exceptionDetails" in result["result"]:
+                return {
+                    "success": False,
+                    "result": result["result"]
+                }
+
+            return {
+                "success": True,
+                "result": css_id
+            }
+        except Exception as e:
+            return {
+                "success": False,
+                "result": e
+            }
+
+    async def remove_css(self, css_id, manage_socket=True):
+        try:
+            result = await self.evaluate_js(
+                f"""
+                (function() {{
+                    let style = document.getElementById("{css_id}");
+
+                    if (style.nodeName.toLowerCase() == 'style')
+                        style.parentNode.removeChild(style);
+                }})()
+                """, False, manage_socket)
+
+            if "exceptionDetails" in result["result"]:
+                return {
+                    "success": False,
+                    "result": result
+                }
+
+            return {
+                "success": True
+            }
+        except Exception as e:
+            return {
+                "success": False,
+                "result": e
+            }
+
     async def get_steam_resource(self, url):
         res = await self.evaluate_js(f'(async function test() {{ return await (await fetch("{url}")).text() }})()', True)
         return res["result"]["result"]["value"]
@@ -59,7 +334,8 @@ class Tab:
     def __repr__(self):
         return self.title
 
-async def get_tabs():
+
+async def get_tabs() -> List[Tab]:
     async with ClientSession() as web:
         res = {}
 
@@ -80,38 +356,29 @@ async def get_tabs():
         else:
             raise Exception(f"/json did not return 200. {await res.text()}")
 
-async def get_tab(tab_name):
+
+async def get_tab(tab_name) -> Tab:
     tabs = await get_tabs()
     tab = next((i for i in tabs if i.title == tab_name), None)
     if not tab:
         raise ValueError(f"Tab {tab_name} not found")
     return tab
 
+async def get_tab_lambda(test) -> Tab:
+    tabs = await get_tabs()
+    tab = next((i for i in tabs if test(i)), None)
+    if not tab:
+        raise ValueError(f"Tab not found by lambda")
+    return tab
+
+async def get_gamepadui_tab() -> Tab:
+    tabs = await get_tabs()
+    tab = next((i for i in tabs if ("https://steamloopback.host/routes/" in i.url and (i.title == "Steam" or i.title == "SP"))), None)
+    if not tab:
+        raise ValueError(f"GamepadUI Tab not found")
+    return tab
+
 async def inject_to_tab(tab_name, js, run_async=False):
     tab = await get_tab(tab_name)
 
     return await tab.evaluate_js(js, run_async)
-
-async def tab_has_global_var(tab_name, var_name):
-    try:
-        tab = await get_tab(tab_name)
-    except ValueError:
-        return False
-    res = await tab.evaluate_js(f"window['{var_name}'] !== null && window['{var_name}'] !== undefined", False)
-
-    if not "result" in res or not "result" in res["result"] or not "value" in res["result"]["result"]:
-        return False
-
-    return res["result"]["result"]["value"]
-
-async def tab_has_element(tab_name, element_name):
-    try:
-        tab = await get_tab(tab_name)
-    except ValueError:
-        return False
-    res = await tab.evaluate_js(f"document.getElementById('{element_name}') != null", False)
-    
-    if not "result" in res or not "result" in res["result"] or not "value" in res["result"]["result"]:
-        return False
-
-    return res["result"]["result"]["value"]

backend/loader.py

@@ -15,7 +15,7 @@ try:
 except UnsupportedLibc:
     from watchdog.observers.fsevents import FSEventsObserver as Observer
 
-from injector import get_tab, inject_to_tab
+from injector import get_tab, get_gamepadui_tab
 from plugin import PluginWrapper
 
 
@@ -141,7 +141,8 @@ class Loader:
             print_exc()
 
     async def dispatch_plugin(self, name, version):
-        await inject_to_tab("SP", f"window.importDeckyPlugin('{name}', '{version}')")
+        gpui_tab = await get_gamepadui_tab()
+        await gpui_tab.evaluate_js(f"window.importDeckyPlugin('{name}', '{version}')")
 
     def import_plugins(self):
         self.logger.info(f"import plugins from {self.plugin_path}")

backend/main.py

@@ -12,7 +12,7 @@ from traceback import format_exc
 
 import aiohttp_cors
 # Partial imports
-from aiohttp import ClientSession
+from aiohttp import ClientSession, client_exceptions
 from aiohttp.web import Application, Response, get, run_app, static
 from aiohttp_jinja2 import setup as jinja_setup
 
@@ -22,7 +22,7 @@ from helpers import (REMOTE_DEBUGGER_UNIT, csrf_middleware, get_csrf_token,
                      get_home_path, get_homebrew_path, get_user,
                      get_user_group, set_user, set_user_group,
                      stop_systemd_unit)
-from injector import inject_to_tab, tab_has_global_var
+from injector import get_gamepadui_tab, Tab, get_tabs
 from loader import Loader
 from settings import SettingsManager
 from updater import Updater
@@ -118,17 +118,49 @@ class PluginManager:
         # await inject_to_tab("SP", "window.syncDeckyPlugins();")
 
     async def loader_reinjector(self):
-        await sleep(2)
-        await self.inject_javascript()
         while True:
-            await sleep(5)
-            if not await tab_has_global_var("SP", "deckyHasLoaded"):
-                logger.info("Plugin loader isn't present in Steam anymore, reinjecting...")
-                await self.inject_javascript()
+            tab = None
+            while not tab:
+                try:
+                    tab = await get_gamepadui_tab()
+                except client_exceptions.ClientConnectorError or client_exceptions.ServerDisconnectedError:
+                    logger.debug("Couldn't connect to debugger, waiting 5 seconds.")
+                    pass
+                except ValueError:
+                    logger.debug("Couldn't find GamepadUI tab, waiting 5 seconds")
+                    pass
+                if not tab:
+                    await sleep(5)
+            await tab.open_websocket()
+            await tab.enable()
+            await self.inject_javascript(tab, True)
+            async for msg in tab.listen_for_message():
+                logger.debug("Page event: " + str(msg.get("method", None)))
+                if msg.get("method", None) == "Page.domContentEventFired":
+                    if not await tab.has_global_var("deckyHasLoaded", False):
+                        await self.inject_javascript(tab)
+                if msg.get("method", None) == "Inspector.detached":
+                    logger.info("Steam is exiting...")
+                    await tab.close_websocket()
+                    break
+        # while True:
+        #     await sleep(5)
+        #     if not await tab.has_global_var("deckyHasLoaded", False):
+        #         logger.info("Plugin loader isn't present in Steam anymore, reinjecting...")
+        #         await self.inject_javascript(tab)
 
-    async def inject_javascript(self, request=None):
+    async def inject_javascript(self, tab: Tab, first=False, request=None):
+        logger.info("Loading Decky frontend!")
         try:
-            await inject_to_tab("SP", "try{if (window.deckyHasLoaded) location.reload();window.deckyHasLoaded = true;(async()=>{while(!window.SP_REACT){await new Promise(r => setTimeout(r, 10))};await import('http://localhost:1337/frontend/index.js')})();}catch(e){console.error(e)}", True)
+            if first:
+                if await tab.has_global_var("deckyHasLoaded", False):
+                    tabs = await get_tabs()
+                    for t in tabs:
+                        if t.title != "Steam" and t.title != "SP":
+                            logger.debug("Closing tab: " + getattr(t, "title", "Untitled"))
+                            await t.close()
+                            await sleep(0.5)
+            await tab.evaluate_js("try{if (window.deckyHasLoaded){setTimeout(() => location.reload(), 1000)}window.deckyHasLoaded = true;(async()=>{while(!window.SP_REACT){await new Promise(r => setTimeout(r, 10))};await import('http://localhost:1337/frontend/index.js')})();}catch(e){console.error(e)}", False, False, False)
         except:
             logger.info("Failed to inject JavaScript into tab\n" + format_exc())
             pass

backend/plugin.py

@@ -71,6 +71,15 @@ class PluginWrapper:
             self.log.error("Failed to start " + self.name + "!\n" + format_exc())
             exit(0)
 
+    async def _unload(self):
+        try:
+            self.log.info("Attempting to unload " + self.name + "\n")
+            if hasattr(self.Plugin, "_unload"):
+                await self.Plugin._unload(self.Plugin)
+        except:
+            self.log.error("Failed to unload " + self.name + "!\n" + format_exc())
+            exit(0)
+
     async def _setup_socket(self):
         self.socket = await start_unix_server(self._listen_for_method_call, path=self.socket_addr, limit=BUFFER_LIMIT)
 
@@ -90,6 +99,7 @@ class PluginWrapper:
                     break
             data = loads(line.decode("utf-8"))
             if "stop" in data:
+                await self._unload()
                 get_event_loop().stop()
                 while get_event_loop().is_running():
                     await sleep(0)

backend/updater.py

@@ -9,7 +9,7 @@ from subprocess import call
 from aiohttp import ClientSession, web
 
 import helpers
-from injector import get_tab, inject_to_tab
+from injector import get_gamepadui_tab, inject_to_tab
 from settings import SettingsManager
 
 logger = getLogger("Updater")
@@ -104,16 +104,11 @@ class Updater:
                 elif selectedBranch == 1:
                     logger.debug("release type: pre-release")
                     self.remoteVer = next(filter(lambda ver: ver["prerelease"] and ver["tag_name"].startswith("v") and ver["tag_name"].find("-pre"), remoteVersions), None)
-                # elif selectedBranch == 2:
-                #     logger.debug("release type: nightly")
-                #     self.remoteVer = next(filter(lambda ver: ver["prerelease"] and ver["tag_name"].startswith("v") and ver["tag_name"].find("nightly"), remoteVersions), None)
                 else:
                     logger.error("release type: NOT FOUND")
                     raise ValueError("no valid branch found")
-                # doesn't make it to this line below or farther
-                # logger.debug("Remote Version: %s" % self.remoteVer.find("name"))
                 logger.info("Updated remote version information")
-                tab = await get_tab("SP")
+                tab = await get_gamepadui_tab()
                 await tab.evaluate_js(f"window.DeckyPluginLoader.notifyUpdates()", False, True, False)
         return await self.get_version()
 
@@ -130,7 +125,7 @@ class Updater:
         version = self.remoteVer["tag_name"]
         download_url = self.remoteVer["assets"][0]["browser_download_url"]
 
-        tab = await get_tab("SP")
+        tab = await get_gamepadui_tab()
         await tab.open_websocket()
         async with ClientSession() as web:
             async with web.request("GET", download_url, ssl=helpers.get_ssl_context(), allow_redirects=True) as res:

backend/utilities.py

@@ -1,10 +1,13 @@
 import uuid
 import os
 from json.decoder import JSONDecodeError
+from traceback import format_exc
 
+from asyncio import sleep, start_server, gather, open_connection
 from aiohttp import ClientSession, web
 
-from injector import inject_to_tab
+from logging import getLogger
+from injector import inject_to_tab, get_gamepadui_tab
 import helpers
 import subprocess
 
@@ -26,9 +29,17 @@ class Utilities:
             "disallow_remote_debugging": self.disallow_remote_debugging,
             "set_setting": self.set_setting,
             "get_setting": self.get_setting,
-            "filepicker_ls": self.filepicker_ls
+            "filepicker_ls": self.filepicker_ls,
+            "disable_rdt": self.disable_rdt,
+            "enable_rdt": self.enable_rdt
         }
 
+        self.logger = getLogger("Utilities")
+
+        self.rdt_proxy_server = None
+        self.rdt_script_id = None
+        self.rdt_proxy_task = None
+
         if context:
             context.web_app.add_routes([
                 web.post("/methods/{method_name}", self._handle_server_method_call)
@@ -194,3 +205,61 @@ class Utilities:
             "realpath": os.path.realpath(path),
             "files": files
         }
+
+    # Based on https://stackoverflow.com/a/46422554/13174603
+    def start_rdt_proxy(self, ip, port):
+        async def pipe(reader, writer):
+            try:
+                while not reader.at_eof():
+                    writer.write(await reader.read(2048))
+            finally:
+                writer.close()
+        async def handle_client(local_reader, local_writer):
+            try:
+                remote_reader, remote_writer = await open_connection(
+                    ip, port)
+                pipe1 = pipe(local_reader, remote_writer)
+                pipe2 = pipe(remote_reader, local_writer)
+                await gather(pipe1, pipe2)
+            finally:
+                local_writer.close()
+
+        self.rdt_proxy_server = start_server(handle_client, "127.0.0.1", port)
+        self.rdt_proxy_task = self.context.loop.create_task(self.rdt_proxy_server)
+
+    def stop_rdt_proxy(self):
+        if self.rdt_proxy_server:
+            self.rdt_proxy_server.close()
+            self.rdt_proxy_task.cancel()
+
+    async def enable_rdt(self):
+        # TODO un-hardcode port
+        try:
+            self.stop_rdt_proxy()
+            ip = self.context.settings.getSetting("developer.rdt.ip", None)
+
+            if ip != None:
+                self.logger.info("Connecting to React DevTools at " + ip)
+                async with ClientSession() as web:
+                    async with web.request("GET", "http://" + ip + ":8097", ssl=helpers.get_ssl_context()) as res:
+                        if res.status != 200:
+                            self.logger.error("Failed to connect to React DevTools at " + ip)
+                            return False
+                        self.start_rdt_proxy(ip, 8097)
+                        script = "if(!window.deckyHasConnectedRDT){window.deckyHasConnectedRDT=true;\n" + await res.text() + "\n}"
+                        self.logger.info("Connected to React DevTools, loading script")
+                        tab = await get_gamepadui_tab()
+                        # RDT needs to load before React itself to work.
+                        result = await tab.reload_and_evaluate(script)
+                        self.logger.info(result)
+                        
+        except Exception:
+            self.logger.error("Failed to connect to React DevTools")
+            self.logger.error(format_exc())
+
+    async def disable_rdt(self):
+        self.logger.info("Disabling React DevTools")
+        tab = await get_gamepadui_tab()
+        self.rdt_script_id = None
+        await tab.evaluate_js("location.reload();", False, True, False)
+        self.logger.info("React DevTools disabled")

frontend/package.json

@@ -41,7 +41,7 @@
     }
   },
   "dependencies": {
-    "decky-frontend-lib": "^3.1.3",
+    "decky-frontend-lib": "^3.7.3",
     "react-file-icon": "^1.2.0",
     "react-icons": "^4.4.0",
     "react-markdown": "^8.0.3",

frontend/pnpm-lock.yaml

@@ -10,7 +10,7 @@ specifiers:
   '@types/react-file-icon': ^1.0.1
   '@types/react-router': 5.1.18
   '@types/webpack': ^5.28.0
-  decky-frontend-lib: ^3.1.3
+  decky-frontend-lib: ^3.7.3
   husky: ^8.0.1
   import-sort-style-module: ^6.0.0
   inquirer: ^8.2.4
@@ -30,7 +30,7 @@ specifiers:
   typescript: ^4.7.4
 
 dependencies:
-  decky-frontend-lib: 3.1.3
+  decky-frontend-lib: 3.7.3
   react-file-icon: 1.2.0_wcqkhtmu7mswc6yz4uyexck3ty
   react-icons: 4.4.0_react@16.14.0
   react-markdown: 8.0.3_vshvapmxg47tngu7tvrsqpq55u
@@ -944,10 +944,10 @@ packages:
     dependencies:
       ms: 2.1.2
 
-  /decky-frontend-lib/3.1.3:
-    resolution: {integrity: sha512-X6DGi90VdXnyoQi8Q4jEYhvBiNQualMNwXWKwgFitdor2ktNj5xp3a4uIi1ijbnS/vdW2AGKjraTfOMXtHUNAg==}
+  /decky-frontend-lib/3.7.3:
+    resolution: {integrity: sha512-HFHI19zr3gzOXDBF0DE9W+ZSx+mtjc/XqCYANoVfpMaDX1ITZpk2lMzBGuh9QvtHZ4LygtYEPIWDlrJDs8rGKA==}
     dependencies:
-      minimist: 1.2.6
+      minimist: 1.2.7
     dev: false
 
   /decode-named-character-reference/1.0.2:
@@ -1944,8 +1944,8 @@ packages:
       brace-expansion: 1.1.11
     dev: true
 
-  /minimist/1.2.6:
-    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
+  /minimist/1.2.7:
+    resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
     dev: false
 
   /mri/1.2.0:

frontend/src/components/DeckyGlobalComponentsState.tsx

@@ -0,0 +1,74 @@
+import { FC, createContext, useContext, useEffect, useState } from 'react';
+
+interface PublicDeckyGlobalComponentsState {
+  components: Map<string, FC>;
+}
+
+export class DeckyGlobalComponentsState {
+  // TODO a set would be better
+  private _components = new Map<string, FC>();
+
+  public eventBus = new EventTarget();
+
+  publicState(): PublicDeckyGlobalComponentsState {
+    return { components: this._components };
+  }
+
+  addComponent(path: string, component: FC) {
+    this._components.set(path, component);
+    this.notifyUpdate();
+  }
+
+  removeComponent(path: string) {
+    this._components.delete(path);
+    this.notifyUpdate();
+  }
+
+  private notifyUpdate() {
+    this.eventBus.dispatchEvent(new Event('update'));
+  }
+}
+
+interface DeckyGlobalComponentsContext extends PublicDeckyGlobalComponentsState {
+  addComponent(path: string, component: FC): void;
+  removeComponent(path: string): void;
+}
+
+const DeckyGlobalComponentsContext = createContext<DeckyGlobalComponentsContext>(null as any);
+
+export const useDeckyGlobalComponentsState = () => useContext(DeckyGlobalComponentsContext);
+
+interface Props {
+  deckyGlobalComponentsState: DeckyGlobalComponentsState;
+}
+
+export const DeckyGlobalComponentsStateContextProvider: FC<Props> = ({
+  children,
+  deckyGlobalComponentsState: deckyGlobalComponentsState,
+}) => {
+  const [publicDeckyGlobalComponentsState, setPublicDeckyGlobalComponentsState] =
+    useState<PublicDeckyGlobalComponentsState>({
+      ...deckyGlobalComponentsState.publicState(),
+    });
+
+  useEffect(() => {
+    function onUpdate() {
+      setPublicDeckyGlobalComponentsState({ ...deckyGlobalComponentsState.publicState() });
+    }
+
+    deckyGlobalComponentsState.eventBus.addEventListener('update', onUpdate);
+
+    return () => deckyGlobalComponentsState.eventBus.removeEventListener('update', onUpdate);
+  }, []);
+
+  const addComponent = deckyGlobalComponentsState.addComponent.bind(deckyGlobalComponentsState);
+  const removeComponent = deckyGlobalComponentsState.removeComponent.bind(deckyGlobalComponentsState);
+
+  return (
+    <DeckyGlobalComponentsContext.Provider
+      value={{ ...publicDeckyGlobalComponentsState, addComponent, removeComponent }}
+    >
+      {children}
+    </DeckyGlobalComponentsContext.Provider>
+  );
+};

frontend/src/components/DeckyToaster.tsx

@@ -0,0 +1,54 @@
+import { ToastData, joinClassNames } from 'decky-frontend-lib';
+import { FC, useEffect, useState } from 'react';
+import { ReactElement } from 'react-markdown/lib/react-markdown';
+
+import { useDeckyToasterState } from './DeckyToasterState';
+import Toast, { toastClasses } from './Toast';
+
+interface DeckyToasterProps {}
+
+interface RenderedToast {
+  component: ReactElement;
+  data: ToastData;
+}
+
+const DeckyToaster: FC<DeckyToasterProps> = () => {
+  const { toasts, removeToast } = useDeckyToasterState();
+  const [renderedToast, setRenderedToast] = useState<RenderedToast | null>(null);
+  console.log(toasts);
+  if (toasts.size > 0) {
+    const [activeToast] = toasts;
+    if (!renderedToast || activeToast != renderedToast.data) {
+      // TODO play toast sound
+      console.log('rendering toast', activeToast);
+      setRenderedToast({ component: <Toast key={Math.random()} toast={activeToast} />, data: activeToast });
+    }
+  } else {
+    if (renderedToast) setRenderedToast(null);
+  }
+  useEffect(() => {
+    // not actually node but TS is shit
+    let interval: NodeJS.Timer | null;
+    if (renderedToast) {
+      interval = setTimeout(() => {
+        interval = null;
+        console.log('clear toast', renderedToast.data);
+        removeToast(renderedToast.data);
+      }, (renderedToast.data.duration || 5e3) + 1000);
+      console.log('set int', interval);
+    }
+    return () => {
+      if (interval) {
+        console.log('clearing int', interval);
+        clearTimeout(interval);
+      }
+    };
+  }, [renderedToast]);
+  return (
+    <div className={joinClassNames('deckyToaster', toastClasses.ToastPlaceholder)}>
+      {renderedToast && renderedToast.component}
+    </div>
+  );
+};
+
+export default DeckyToaster;

frontend/src/components/DeckyToasterState.tsx

@@ -0,0 +1,69 @@
+import { ToastData } from 'decky-frontend-lib';
+import { FC, createContext, useContext, useEffect, useState } from 'react';
+
+interface PublicDeckyToasterState {
+  toasts: Set<ToastData>;
+}
+
+export class DeckyToasterState {
+  // TODO a set would be better
+  private _toasts: Set<ToastData> = new Set();
+
+  public eventBus = new EventTarget();
+
+  publicState(): PublicDeckyToasterState {
+    return { toasts: this._toasts };
+  }
+
+  addToast(toast: ToastData) {
+    this._toasts.add(toast);
+    this.notifyUpdate();
+  }
+
+  removeToast(toast: ToastData) {
+    this._toasts.delete(toast);
+    this.notifyUpdate();
+  }
+
+  private notifyUpdate() {
+    this.eventBus.dispatchEvent(new Event('update'));
+  }
+}
+
+interface DeckyToasterContext extends PublicDeckyToasterState {
+  addToast(toast: ToastData): void;
+  removeToast(toast: ToastData): void;
+}
+
+const DeckyToasterContext = createContext<DeckyToasterContext>(null as any);
+
+export const useDeckyToasterState = () => useContext(DeckyToasterContext);
+
+interface Props {
+  deckyToasterState: DeckyToasterState;
+}
+
+export const DeckyToasterStateContextProvider: FC<Props> = ({ children, deckyToasterState }) => {
+  const [publicDeckyToasterState, setPublicDeckyToasterState] = useState<PublicDeckyToasterState>({
+    ...deckyToasterState.publicState(),
+  });
+
+  useEffect(() => {
+    function onUpdate() {
+      setPublicDeckyToasterState({ ...deckyToasterState.publicState() });
+    }
+
+    deckyToasterState.eventBus.addEventListener('update', onUpdate);
+
+    return () => deckyToasterState.eventBus.removeEventListener('update', onUpdate);
+  }, []);
+
+  const addToast = deckyToasterState.addToast.bind(deckyToasterState);
+  const removeToast = deckyToasterState.removeToast.bind(deckyToasterState);
+
+  return (
+    <DeckyToasterContext.Provider value={{ ...publicDeckyToasterState, addToast, removeToast }}>
+      {children}
+    </DeckyToasterContext.Provider>
+  );
+};

frontend/src/components/Markdown.tsx

@@ -1,4 +1,4 @@
-import { Focusable } from 'decky-frontend-lib';
+import { Focusable, Router } from 'decky-frontend-lib';
 import { FunctionComponent, useRef } from 'react';
 import ReactMarkdown, { Options as ReactMarkdownOptions } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -21,8 +21,8 @@ const Markdown: FunctionComponent<MarkdownProps> = (props) => {
               <Focusable
                 onActivate={() => {}}
                 onOKButton={() => {
-                  aRef?.current?.click();
                   props.onDismiss?.();
+                  Router.NavigateToExternalWeb(aRef.current!.href);
                 }}
                 style={{ display: 'inline' }}
               >

frontend/src/components/PluginView.tsx

@@ -26,7 +26,7 @@ const PluginView: VFC = () => {
           className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}
           style={{ height: '100%' }}
         >
-          {visible && activePlugin.content}
+          {(visible || activePlugin.alwaysRender) && activePlugin.content}
         </div>
       </Focusable>
     );

frontend/src/components/QuickAccessVisibleState.tsx

@@ -1,13 +1,27 @@
-import { FC, createContext, useContext } from 'react';
+import { FC, createContext, useContext, useEffect, useRef, useState } from 'react';
 
 const QuickAccessVisibleState = createContext<boolean>(true);
 
 export const useQuickAccessVisible = () => useContext(QuickAccessVisibleState);
 
-interface Props {
-  visible: boolean;
-}
-
-export const QuickAccessVisibleStateProvider: FC<Props> = ({ children, visible }) => {
-  return <QuickAccessVisibleState.Provider value={visible}>{children}</QuickAccessVisibleState.Provider>;
+export const QuickAccessVisibleStateProvider: FC<{}> = ({ children }) => {
+  const divRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState<boolean>(false);
+  useEffect(() => {
+    const doc: Document | void | null = divRef?.current?.ownerDocument;
+    if (!doc) return;
+    setVisible(doc.visibilityState == 'visible');
+    const onChange = (e: Event) => {
+      setVisible(doc.visibilityState == 'visible');
+    };
+    doc.addEventListener('visibilitychange', onChange);
+    return () => {
+      doc.removeEventListener('visibilitychange', onChange);
+    };
+  }, [divRef]);
+  return (
+    <div ref={divRef}>
+      <QuickAccessVisibleState.Provider value={visible}>{children}</QuickAccessVisibleState.Provider>
+    </div>
+  );
 };

frontend/src/components/Toast.tsx

@@ -2,13 +2,10 @@ import { ToastData, findModule, joinClassNames } from 'decky-frontend-lib';
 import { FunctionComponent } from 'react';
 
 interface ToastProps {
-  toast: {
-    data: ToastData;
-    nToastDurationMS: number;
-  };
+  toast: ToastData;
 }
 
-const toastClasses = findModule((mod) => {
+export const toastClasses = findModule((mod) => {
   if (typeof mod !== 'object') return false;
 
   if (mod.ToastPlaceholder) {
@@ -30,21 +27,19 @@ const templateClasses = findModule((mod) => {
 
 const Toast: FunctionComponent<ToastProps> = ({ toast }) => {
   return (
-    <div
-      style={{ '--toast-duration': `${toast.nToastDurationMS}ms` } as React.CSSProperties}
-      className={joinClassNames(toastClasses.ToastPopup, toastClasses.toastEnter)}
-    >
+    <div className={toastClasses.ToastPopup}>
       <div
-        onClick={toast.data.onClick}
-        className={joinClassNames(templateClasses.ShortTemplate, toast.data.className || '')}
+        style={{ '--toast-duration': `${toast.duration}ms` } as React.CSSProperties}
+        onClick={toast.onClick}
+        className={joinClassNames(templateClasses.ShortTemplate, toast.className || '')}
       >
-        {toast.data.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.data.logo}</div>}
-        <div className={joinClassNames(templateClasses.Content, toast.data.contentClassName || '')}>
+        {toast.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.logo}</div>}
+        <div className={joinClassNames(templateClasses.Content, toast.contentClassName || '')}>
           <div className={templateClasses.Header}>
-            {toast.data.icon && <div className={templateClasses.Icon}>{toast.data.icon}</div>}
-            <div className={templateClasses.Title}>{toast.data.title}</div>
+            {toast.icon && <div className={templateClasses.Icon}>{toast.icon}</div>}
+            <div className={templateClasses.Title}>{toast.title}</div>
           </div>
-          <div className={templateClasses.Body}>{toast.data.body}</div>
+          <div className={templateClasses.Body}>{toast.body}</div>
         </div>
       </div>
     </div>

frontend/src/components/settings/index.tsx

@@ -1,25 +1,39 @@
 import { SidebarNavigation } from 'decky-frontend-lib';
+import { lazy } from 'react';
 
+import { useSetting } from '../../utils/hooks/useSetting';
+import WithSuspense from '../WithSuspense';
 import GeneralSettings from './pages/general';
 import PluginList from './pages/plugin_list';
 
+const DeveloperSettings = lazy(() => import('./pages/developer'));
+
 export default function SettingsPage() {
-  return (
-    <SidebarNavigation
-      title="Decky Settings"
-      showTitle
-      pages={[
-        {
-          title: 'General',
-          content: <GeneralSettings />,
-          route: '/decky/settings/general',
-        },
-        {
-          title: 'Plugins',
-          content: <PluginList />,
-          route: '/decky/settings/plugins',
-        },
-      ]}
-    />
-  );
+  const [isDeveloper, setIsDeveloper] = useSetting<boolean>('developer.enabled', false);
+
+  const pages = [
+    {
+      title: 'General',
+      content: <GeneralSettings isDeveloper={isDeveloper} setIsDeveloper={setIsDeveloper} />,
+      route: '/decky/settings/general',
+    },
+    {
+      title: 'Plugins',
+      content: <PluginList />,
+      route: '/decky/settings/plugins',
+    },
+  ];
+
+  if (isDeveloper)
+    pages.push({
+      title: 'Developer',
+      content: (
+        <WithSuspense>
+          <DeveloperSettings />
+        </WithSuspense>
+      ),
+      route: '/decky/settings/developer',
+    });
+
+  return <SidebarNavigation title="Decky Settings" showTitle pages={pages} />;
 }

frontend/src/components/settings/pages/developer/index.tsx

@@ -0,0 +1,84 @@
+import { Field, Focusable, TextField, Toggle } from 'decky-frontend-lib';
+import { useRef } from 'react';
+import { FaReact, FaSteamSymbol } from 'react-icons/fa';
+
+import { setShouldConnectToReactDevTools, setShowValveInternal } from '../../../../developer';
+import { useSetting } from '../../../../utils/hooks/useSetting';
+
+export default function DeveloperSettings() {
+  const [enableValveInternal, setEnableValveInternal] = useSetting<boolean>('developer.valve_internal', false);
+  const [reactDevtoolsEnabled, setReactDevtoolsEnabled] = useSetting<boolean>('developer.rdt.enabled', false);
+  const [reactDevtoolsIP, setReactDevtoolsIP] = useSetting<string>('developer.rdt.ip', '');
+  const textRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <Field
+        label="Enable Valve Internal"
+        description={
+          <span style={{ whiteSpace: 'pre-line' }}>
+            Enables the Valve internal developer menu.{' '}
+            <span style={{ color: 'red' }}>Do not touch anything in this menu unless you know what it does.</span>
+          </span>
+        }
+        icon={<FaSteamSymbol style={{ display: 'block' }} />}
+      >
+        <Toggle
+          value={enableValveInternal}
+          onChange={(toggleValue) => {
+            setEnableValveInternal(toggleValue);
+            setShowValveInternal(toggleValue);
+          }}
+        />
+      </Field>{' '}
+      <Focusable
+        onTouchEnd={
+          reactDevtoolsIP == ''
+            ? () => {
+                (textRef.current?.childNodes[0] as HTMLInputElement)?.focus();
+              }
+            : undefined
+        }
+        onClick={
+          reactDevtoolsIP == ''
+            ? () => {
+                (textRef.current?.childNodes[0] as HTMLInputElement)?.focus();
+              }
+            : undefined
+        }
+        onOKButton={
+          reactDevtoolsIP == ''
+            ? () => {
+                (textRef.current?.childNodes[0] as HTMLInputElement)?.focus();
+              }
+            : undefined
+        }
+      >
+        <Field
+          label="Enable React DevTools"
+          description={
+            <>
+              <span style={{ whiteSpace: 'pre-line' }}>
+                Enables connection to a computer running React DevTools. Changing this setting will reload Steam. Set
+                the IP address before enabling.
+              </span>
+              <div ref={textRef}>
+                <TextField label={'IP'} value={reactDevtoolsIP} onChange={(e) => setReactDevtoolsIP(e?.target.value)} />
+              </div>
+            </>
+          }
+          icon={<FaReact style={{ display: 'block' }} />}
+        >
+          <Toggle
+            value={reactDevtoolsEnabled}
+            disabled={reactDevtoolsIP == ''}
+            onChange={(toggleValue) => {
+              setReactDevtoolsEnabled(toggleValue);
+              setShouldConnectToReactDevTools(toggleValue);
+            }}
+          />
+        </Field>
+      </Focusable>
+    </>
+  );
+}

frontend/src/components/settings/pages/general/Updater.tsx

@@ -14,6 +14,7 @@ import { useEffect, useState } from 'react';
 import { FaArrowDown } from 'react-icons/fa';
 
 import { VerInfo, callUpdaterMethod, finishUpdate } from '../../../../updater';
+import { findSP } from '../../../../utils/windows';
 import { useDeckyState } from '../../../DeckyState';
 import InlinePatchNotes from '../../../patchnotes/InlinePatchNotes';
 import WithSuspense from '../../../WithSuspense';
@@ -21,6 +22,7 @@ import WithSuspense from '../../../WithSuspense';
 const MarkdownRenderer = lazy(() => import('../../../Markdown'));
 
 function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | null; closeModal?: () => {} }) {
+  const SP = findSP();
   return (
     <Focusable onCancelButton={closeModal}>
       <FocusRing>
@@ -50,12 +52,13 @@ function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | n
           )}
           fnGetId={(id) => id}
           nNumItems={versionInfo?.all?.length}
-          nHeight={window.innerHeight - 40}
-          nItemHeight={window.innerHeight - 40}
+          nHeight={SP.innerHeight - 40}
+          nItemHeight={SP.innerHeight - 40}
           nItemMarginX={0}
           initialColumn={0}
           autoFocus={true}
-          fnGetColumnWidth={() => window.innerWidth}
+          fnGetColumnWidth={() => SP.innerWidth}
+          name="Decky Updates"
         />
       </FocusRing>
     </Focusable>

frontend/src/components/settings/pages/general/index.tsx

@@ -1,29 +1,37 @@
-import { DialogButton, Field, TextField } from 'decky-frontend-lib';
+import { DialogButton, Field, TextField, Toggle } from 'decky-frontend-lib';
 import { useState } from 'react';
-import { FaShapes } from 'react-icons/fa';
+import { FaShapes, FaTools } from 'react-icons/fa';
 
 import { installFromURL } from '../../../../store';
 import BranchSelect from './BranchSelect';
 import RemoteDebuggingSettings from './RemoteDebugging';
 import UpdaterSettings from './Updater';
 
-export default function GeneralSettings() {
+export default function GeneralSettings({
+  isDeveloper,
+  setIsDeveloper,
+}: {
+  isDeveloper: boolean;
+  setIsDeveloper: (val: boolean) => void;
+}) {
   const [pluginURL, setPluginURL] = useState('');
-  // const [checked, setChecked] = useState(false); // store these in some kind of State instead
   return (
     <div>
-      {/* <Field
-        label="A Toggle with an icon"
-        icon={<FaShapes style={{ display: 'block' }} />}
-      >
-        <Toggle
-          value={checked}
-          onChange={(e) => setChecked(e)}
-        />
-      </Field> */}
       <UpdaterSettings />
       <BranchSelect />
       <RemoteDebuggingSettings />
+      <Field
+        label="Developer mode"
+        description={<span style={{ whiteSpace: 'pre-line' }}>Enables Decky's developer settings.</span>}
+        icon={<FaTools style={{ display: 'block' }} />}
+      >
+        <Toggle
+          value={isDeveloper}
+          onChange={(toggleValue) => {
+            setIsDeveloper(toggleValue);
+          }}
+        />
+      </Field>
       <Field
         label="Manual plugin install"
         description={<TextField label={'URL'} value={pluginURL} onChange={(e) => setPluginURL(e?.target.value)} />}

frontend/src/components/store/PluginCard.tsx

@@ -11,17 +11,10 @@ import {
 } from 'decky-frontend-lib';
 import { FC, useRef, useState } from 'react';
 
-import {
-  LegacyStorePlugin,
-  StorePlugin,
-  StorePluginVersion,
-  isLegacyPlugin,
-  requestLegacyPluginInstall,
-  requestPluginInstall,
-} from '../../store';
+import { StorePlugin, StorePluginVersion, requestPluginInstall } from '../../store';
 
 interface PluginCardProps {
-  plugin: StorePlugin | LegacyStorePlugin;
+  plugin: StorePlugin;
 }
 
 const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
@@ -63,22 +56,13 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
         }}
       >
         <div className="deckyStoreCardHeader" style={{ display: 'flex', alignItems: 'center' }}>
-          <a
+          <div
             style={{ fontSize: '18pt', padding: '10px' }}
             className={joinClassNames(staticClasses.Text)}
             // onClick={() => Router.NavigateToExternalWeb('https://github.com/' + plugin.artifact)}
           >
-            {isLegacyPlugin(plugin) ? (
-              <div className="deckyStoreCardNameContainer">
-                <span className="deckyStoreCardLegacyRepoOwner" style={{ color: 'grey' }}>
-                  {plugin.artifact.split('/')[0]}/
-                </span>
-                {plugin.artifact.split('/')[1]}
-              </div>
-            ) : (
-              plugin.name
-            )}
-          </a>
+            {plugin.name}
+          </div>
         </div>
         <div
           style={{
@@ -94,17 +78,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
               width: 'auto',
               height: '160px',
             }}
-            src={
-              isLegacyPlugin(plugin)
-                ? `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/artifact_images/${plugin.artifact.replace(
-                    '/',
-                    '_',
-                  )}.png`
-                : `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/artifact_images/${plugin.name.replace(
-                    '/',
-                    '_',
-                  )}.png`
-            }
+            src={plugin.image_url}
           />
           <div
             style={{
@@ -152,19 +126,6 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                   {tag == 'root' ? 'Requires root' : tag}
                 </span>
               ))}
-              {isLegacyPlugin(plugin) && (
-                <span
-                  className="deckyStoreCardTag deckyStoreCardLegacyTag"
-                  style={{
-                    color: '#232120',
-                    padding: '5px',
-                    borderRadius: '5px',
-                    background: '#EDE841',
-                  }}
-                >
-                  legacy
-                </span>
-              )}
             </p>
           </div>
         </div>
@@ -194,11 +155,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
               <DialogButton
                 className="deckyStoreCardInstallButton"
                 ref={buttonRef}
-                onClick={() =>
-                  isLegacyPlugin(plugin)
-                    ? requestLegacyPluginInstall(plugin, Object.keys(plugin.versions)[selectedOption])
-                    : requestPluginInstall(plugin.name, plugin.versions[selectedOption])
-                }
+                onClick={() => requestPluginInstall(plugin.name, plugin.versions[selectedOption])}
               >
                 Install
               </DialogButton>
@@ -211,15 +168,10 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
             >
               <Dropdown
                 rgOptions={
-                  (isLegacyPlugin(plugin)
-                    ? Object.keys(plugin.versions).map((v, k) => ({
-                        data: k,
-                        label: v,
-                      }))
-                    : plugin.versions.map((version: StorePluginVersion, index) => ({
-                        data: index,
-                        label: version.name,
-                      }))) as SingleDropdownOption[]
+                  plugin.versions.map((version: StorePluginVersion, index) => ({
+                    data: index,
+                    label: version.name,
+                  })) as SingleDropdownOption[]
                 }
                 strDefaultLabel={'Select a version'}
                 selectedOption={selectedOption}

frontend/src/components/store/Store.tsx

@@ -2,14 +2,13 @@ import { SteamSpinner } from 'decky-frontend-lib';
 import { FC, useEffect, useState } from 'react';
 
 import Logger from '../../logger';
-import { LegacyStorePlugin, StorePlugin, getLegacyPluginList, getPluginList } from '../../store';
+import { StorePlugin, getPluginList } from '../../store';
 import PluginCard from './PluginCard';
 
 const logger = new Logger('FilePicker');
 
 const StorePage: FC<{}> = () => {
   const [data, setData] = useState<StorePlugin[] | null>(null);
-  const [legacyData, setLegacyData] = useState<LegacyStorePlugin[] | null>(null);
 
   useEffect(() => {
     (async () => {
@@ -17,11 +16,6 @@ const StorePage: FC<{}> = () => {
       logger.log('got data!', res);
       setData(res);
     })();
-    (async () => {
-      const res = await getLegacyPluginList();
-      logger.log('got legacy data!', res);
-      setLegacyData(res);
-    })();
   }, []);
 
   return (
@@ -49,11 +43,6 @@ const StorePage: FC<{}> = () => {
             {data.map((plugin: StorePlugin) => (
               <PluginCard plugin={plugin} />
             ))}
-            {!legacyData ? (
-              <SteamSpinner />
-            ) : (
-              legacyData.map((plugin: LegacyStorePlugin) => <PluginCard plugin={plugin} />)
-            )}
           </div>
         )}
       </div>

frontend/src/developer.tsx

@@ -0,0 +1,96 @@
+import {
+  ReactRouter,
+  Router,
+  fakeRenderComponent,
+  findInReactTree,
+  findInTree,
+  findModule,
+  findModuleChild,
+  gamepadDialogClasses,
+  gamepadSliderClasses,
+  playSectionClasses,
+  quickAccessControlsClasses,
+  quickAccessMenuClasses,
+  scrollClasses,
+  scrollPanelClasses,
+  sleep,
+  staticClasses,
+  updaterFieldClasses,
+} from 'decky-frontend-lib';
+import { FaReact } from 'react-icons/fa';
+
+import Logger from './logger';
+import { getSetting } from './utils/settings';
+
+const logger = new Logger('DeveloperMode');
+
+let removeSettingsObserver: () => void = () => {};
+
+export function setShowValveInternal(show: boolean) {
+  const settingsMod = findModuleChild((m) => {
+    if (typeof m !== 'object') return undefined;
+    for (let prop in m) {
+      if (typeof m[prop]?.settings?.bIsValveEmail !== 'undefined') return m[prop];
+    }
+  });
+
+  if (show) {
+    removeSettingsObserver = settingsMod[
+      Object.getOwnPropertySymbols(settingsMod).find((x) => x.toString() == 'Symbol(mobx administration)') as any
+    ].observe((e: any) => {
+      e.newValue.bIsValveEmail = true;
+    });
+    settingsMod.m_Settings.bIsValveEmail = true;
+    logger.log('Enabled Valve Internal menu');
+  } else {
+    removeSettingsObserver();
+    settingsMod.m_Settings.bIsValveEmail = false;
+    logger.log('Disabled Valve Internal menu');
+  }
+}
+
+export async function setShouldConnectToReactDevTools(enable: boolean) {
+  window.DeckyPluginLoader.toaster.toast({
+    title: (enable ? 'Enabling' : 'Disabling') + ' React DevTools',
+    body: 'Reloading in 5 seconds',
+    icon: <FaReact />,
+  });
+  await sleep(5000);
+  return enable
+    ? window.DeckyPluginLoader.callServerMethod('enable_rdt')
+    : window.DeckyPluginLoader.callServerMethod('disable_rdt');
+}
+
+export async function startup() {
+  const isValveInternalEnabled = await getSetting('developer.valve_internal', false);
+  const isRDTEnabled = await getSetting('developer.rdt.enabled', false);
+
+  if (isValveInternalEnabled) setShowValveInternal(isValveInternalEnabled);
+
+  if ((isRDTEnabled && !window.deckyHasConnectedRDT) || (!isRDTEnabled && window.deckyHasConnectedRDT))
+    setShouldConnectToReactDevTools(isRDTEnabled);
+
+  logger.log('Exposing decky-frontend-lib APIs as DFL');
+  window.DFL = {
+    findModuleChild,
+    findModule,
+    ReactUtils: {
+      fakeRenderComponent,
+      findInReactTree,
+      findInTree,
+    },
+    Router,
+    ReactRouter,
+    classes: {
+      scrollClasses,
+      staticClasses,
+      playSectionClasses,
+      scrollPanelClasses,
+      updaterFieldClasses,
+      gamepadDialogClasses,
+      gamepadSliderClasses,
+      quickAccessMenuClasses,
+      quickAccessControlsClasses,
+    },
+  };
+}

frontend/src/index.tsx

@@ -1,6 +1,3 @@
-import { ButtonItem, CommonUIModule, webpackCache } from 'decky-frontend-lib';
-import { forwardRef } from 'react';
-
 import PluginLoader from './plugin-loader';
 import { DeckyUpdater } from './updater';
 
@@ -11,32 +8,12 @@ declare global {
     importDeckyPlugin: Function;
     syncDeckyPlugins: Function;
     deckyHasLoaded: boolean;
+    deckyHasConnectedRDT?: boolean;
     deckyAuthToken: string;
-    webpackJsonp: any;
+    DFL?: any;
   }
 }
 
-// HACK to fix plugins using webpack v4 push
-
-const v4Cache = {};
-for (let m of Object.keys(webpackCache)) {
-  v4Cache[m] = { exports: webpackCache[m] };
-}
-
-if (!window.webpackJsonp || window.webpackJsonp.deckyShimmed) {
-  window.webpackJsonp = {
-    deckyShimmed: true,
-    push: (mod: any): any => {
-      if (mod[1].get_require) return { c: v4Cache };
-    },
-  };
-  CommonUIModule.__deckyButtonItemShim = forwardRef((props: any, ref: any) => {
-    // tricks the old filter into working
-    const dummy = `childrenContainerWidth:"min"`;
-    return <ButtonItem ref={ref} _shim={dummy} {...props} />;
-  });
-}
-
 (async () => {
   window.deckyAuthToken = await fetch('http://127.0.0.1:1337/auth/token').then((r) => r.text());
 
@@ -44,6 +21,7 @@ if (!window.webpackJsonp || window.webpackJsonp.deckyShimmed) {
   window.DeckyPluginLoader?.deinit();
 
   window.DeckyPluginLoader = new PluginLoader();
+  window.DeckyPluginLoader.init();
   window.importDeckyPlugin = function (name: string, version: string) {
     window.DeckyPluginLoader?.importPlugin(name, version);
   };

frontend/src/plugin-loader.tsx

@@ -9,7 +9,7 @@ import {
   staticClasses,
 } from 'decky-frontend-lib';
 import { lazy } from 'react';
-import { FaPlug } from 'react-icons/fa';
+import { FaExclamationCircle, FaPlug } from 'react-icons/fa';
 
 import { DeckyState, DeckyStateContextProvider, useDeckyState } from './components/DeckyState';
 import LegacyPlugin from './components/LegacyPlugin';
@@ -25,6 +25,7 @@ import { checkForUpdates } from './store';
 import TabsHook from './tabs-hook';
 import Toaster from './toaster';
 import { VerInfo, callUpdaterMethod } from './updater';
+import { getSetting } from './utils/settings';
 
 const StorePage = lazy(() => import('./components/store/Store'));
 const SettingsPage = lazy(() => import('./components/settings'));
@@ -40,7 +41,7 @@ class PluginLoader extends Logger {
   private tabsHook: TabsHook = new TabsHook();
   // private windowHook: WindowHook = new WindowHook();
   private routerHook: RouterHook = new RouterHook();
-  private toaster: Toaster = new Toaster();
+  public toaster: Toaster = new Toaster(this.routerHook);
   private deckyState: DeckyState = new DeckyState();
 
   private reloadLock: boolean = false;
@@ -172,6 +173,12 @@ class PluginLoader extends Logger {
     }
   }
 
+  public init() {
+    getSetting('developer.enabled', false).then((val) => {
+      if (val) import('./developer').then((developer) => developer.startup());
+    });
+  }
+
   public deinit() {
     this.routerHook.removeRoute('/decky/store');
     this.routerHook.removeRoute('/decky/settings');
@@ -226,13 +233,18 @@ class PluginLoader extends Logger {
       },
     });
     if (res.ok) {
-      let plugin_export = await eval(await res.text());
-      let plugin = plugin_export(this.createPluginAPI(name));
-      this.plugins.push({
-        ...plugin,
-        name: name,
-        version: version,
-      });
+      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);
+        this.toaster.toast({ title: 'Error loading ' + name, body: '' + e, icon: <FaExclamationCircle /> });
+      }
     } else throw new Error(`${name} frontend_bundle not OK`);
   }
 

frontend/src/plugin.ts

@@ -4,4 +4,5 @@ export interface Plugin {
   icon: JSX.Element;
   content?: JSX.Element;
   onDismount?(): void;
+  alwaysRender?: boolean;
 }

frontend/src/router-hook.tsx

@@ -1,7 +1,12 @@
 import { Patch, afterPatch, findModuleChild } from 'decky-frontend-lib';
-import { ReactElement, ReactNode, cloneElement, createElement, memo } from 'react';
+import { FC, ReactElement, ReactNode, cloneElement, createElement, memo } from 'react';
 import type { Route } from 'react-router';
 
+import {
+  DeckyGlobalComponentsState,
+  DeckyGlobalComponentsStateContextProvider,
+  useDeckyGlobalComponentsState,
+} from './components/DeckyGlobalComponentsState';
 import {
   DeckyRouterState,
   DeckyRouterStateContextProvider,
@@ -22,8 +27,10 @@ class RouterHook extends Logger {
   private memoizedRouter: any;
   private gamepadWrapper: any;
   private routerState: DeckyRouterState = new DeckyRouterState();
+  private globalComponentsState: DeckyGlobalComponentsState = new DeckyGlobalComponentsState();
   private wrapperPatch: Patch;
   private routerPatch?: Patch;
+  public routes?: any[];
 
   constructor() {
     super('RouterHook');
@@ -42,24 +49,28 @@ class RouterHook extends Logger {
 
     let Route: new () => Route;
     // Used to store the new replicated routes we create to allow routes to be unpatched.
-    let toReplace = new Map<string, ReactNode>();
-    const DeckyWrapper = ({ children }: { children: ReactElement }) => {
-      const { routes, routePatches } = useDeckyRouterState();
-
-      const routeList = children.props.children[0].props.children;
-
+    const processList = (
+      routeList: any[],
+      routes: Map<string, RouterEntry> | null,
+      routePatches: Map<string, Set<RoutePatch>>,
+      save: boolean,
+    ) => {
+      this.debug('Route list: ', routeList);
+      if (save) this.routes = routeList;
       let routerIndex = routeList.length;
-      if (!routeList[routerIndex - 1]?.length || routeList[routerIndex - 1]?.length !== routes.size) {
-        if (routeList[routerIndex - 1]?.length && routeList[routerIndex - 1].length !== routes.size) routerIndex--;
-        const newRouterArray: ReactElement[] = [];
-        routes.forEach(({ component, props }, path) => {
-          newRouterArray.push(
-            <Route path={path} {...props}>
-              {createElement(component)}
-            </Route>,
-          );
-        });
-        routeList[routerIndex] = newRouterArray;
+      if (routes) {
+        if (!routeList[routerIndex - 1]?.length || routeList[routerIndex - 1]?.length !== routes.size) {
+          if (routeList[routerIndex - 1]?.length && routeList[routerIndex - 1].length !== routes.size) routerIndex--;
+          const newRouterArray: ReactElement[] = [];
+          routes.forEach(({ component, props }, path) => {
+            newRouterArray.push(
+              <Route path={path} {...props}>
+                {createElement(component)}
+              </Route>,
+            );
+          });
+          routeList[routerIndex] = newRouterArray;
+        }
       }
       routeList.forEach((route: Route, index: number) => {
         const replaced = toReplace.get(route?.props?.path as string);
@@ -85,19 +96,40 @@ class RouterHook extends Logger {
           });
         }
       });
+    };
+    let toReplace = new Map<string, ReactNode>();
+    const DeckyWrapper = ({ children }: { children: ReactElement }) => {
+      const { routes, routePatches } = useDeckyRouterState();
+      const mainRouteList = children.props.children[0].props.children;
+      const ingameRouteList = children.props.children[1].props.children; // /appoverlay and /apprunning
+      processList(mainRouteList, routes, routePatches, true);
+      processList(ingameRouteList, null, routePatches, false);
+
       this.debug('Rerendered routes list');
       return children;
     };
 
+    let renderedComponents: ReactElement[] = [];
+
+    const DeckyGlobalComponentsWrapper = () => {
+      const { components } = useDeckyGlobalComponentsState();
+      if (renderedComponents.length != components.size) {
+        this.debug('Rerendering global components');
+        renderedComponents = Array.from(components.values()).map((GComponent) => <GComponent />);
+      }
+      return <>{renderedComponents}</>;
+    };
+
     this.wrapperPatch = afterPatch(this.gamepadWrapper, 'render', (_: any, ret: any) => {
-      if (ret?.props?.children?.props?.children?.length == 5) {
+      if (ret?.props?.children?.props?.children?.length == 5 || ret?.props?.children?.props?.children?.length == 4) {
+        const idx = ret?.props?.children?.props?.children?.length == 4 ? 1 : 2;
         if (
-          ret.props.children.props.children[2]?.props?.children?.[0]?.type?.type
+          ret.props.children.props.children[idx]?.props?.children?.[0]?.type?.type
             ?.toString()
             ?.includes('GamepadUI.Settings.Root()')
         ) {
           if (!this.router) {
-            this.router = ret.props.children.props.children[2]?.props?.children?.[0]?.type;
+            this.router = ret.props.children.props.children[idx]?.props?.children?.[0]?.type;
             this.routerPatch = afterPatch(this.router, 'type', (_: any, ret: any) => {
               if (!Route)
                 Route = ret.props.children[0].props.children.find((x: any) => x.props.path == '/createaccount').type;
@@ -111,7 +143,12 @@ class RouterHook extends Logger {
             this.memoizedRouter = memo(this.router.type);
             this.memoizedRouter.isDeckyRouter = true;
           }
-          ret.props.children.props.children[2].props.children[0].type = this.memoizedRouter;
+          ret.props.children.props.children.push(
+            <DeckyGlobalComponentsStateContextProvider deckyGlobalComponentsState={this.globalComponentsState}>
+              <DeckyGlobalComponentsWrapper />
+            </DeckyGlobalComponentsStateContextProvider>,
+          );
+          ret.props.children.props.children[idx].props.children[0].type = this.memoizedRouter;
         }
       }
       return ret;
@@ -126,6 +163,14 @@ class RouterHook extends Logger {
     return this.routerState.addPatch(path, patch);
   }
 
+  addGlobalComponent(name: string, component: FC) {
+    this.globalComponentsState.addComponent(name, component);
+  }
+
+  removeGlobalComponent(name: string) {
+    this.globalComponentsState.removeComponent(name);
+  }
+
   removePatch(path: string, patch: RoutePatch) {
     this.routerState.removePatch(path, patch);
   }

frontend/src/store.tsx

@@ -1,5 +1,3 @@
-import { ConfirmModal, showModal, staticClasses } from 'decky-frontend-lib';
-
 import { Plugin } from './plugin';
 
 export interface StorePluginVersion {
@@ -14,30 +12,19 @@ export interface StorePlugin {
   author: string;
   description: string;
   tags: string[];
-}
-
-export interface LegacyStorePlugin {
-  artifact: string;
-  versions: {
-    [version: string]: string;
-  };
-  author: string;
-  description: string;
-  tags: string[];
+  image_url: string;
 }
 
 // name: version
 export type PluginUpdateMapping = Map<string, StorePluginVersion>;
 
-export function getPluginList(): Promise<StorePlugin[]> {
-  return fetch('https://beta.deckbrew.xyz/plugins', {
-    method: 'GET',
-  }).then((r) => r.json());
-}
-
-export function getLegacyPluginList(): Promise<LegacyStorePlugin[]> {
-  return fetch('https://plugins.deckbrew.xyz/get_plugins', {
+export async function getPluginList(): Promise<StorePlugin[]> {
+  let version = await window.DeckyPluginLoader.updateVersion();
+  return fetch('https://plugins.deckbrew.xyz/plugins', {
     method: 'GET',
+    headers: {
+      'X-Decky-Version': version.current,
+    },
   }).then((r) => r.json());
 }
 
@@ -49,31 +36,6 @@ export async function installFromURL(url: string) {
   });
 }
 
-export function requestLegacyPluginInstall(plugin: LegacyStorePlugin, selectedVer: string) {
-  showModal(
-    <ConfirmModal
-      onOK={() => {
-        window.DeckyPluginLoader.callServerMethod('install_plugin', {
-          name: plugin.artifact,
-          artifact: `https://github.com/${plugin.artifact}/archive/refs/tags/${selectedVer}.zip`,
-          version: selectedVer,
-          hash: plugin.versions[selectedVer],
-        });
-      }}
-      onCancel={() => {
-        // do nothing
-      }}
-    >
-      <div className={staticClasses.Title} style={{ flexDirection: 'column', boxShadow: 'unset' }}>
-        Using legacy plugins
-      </div>
-      You are currently installing a <b>legacy</b> plugin. Legacy plugins are no longer supported and may have issues.
-      Legacy plugins do not support gamepad input. To interact with a legacy plugin, you will need to use the
-      touchscreen.
-    </ConfirmModal>,
-  );
-}
-
 export async function requestPluginInstall(plugin: string, selectedVer: StorePluginVersion) {
   await window.DeckyPluginLoader.callServerMethod('install_plugin', {
     name: plugin,
@@ -94,7 +56,3 @@ export async function checkForUpdates(plugins: Plugin[]): Promise<PluginUpdateMa
   }
   return updateMap;
 }
-
-export function isLegacyPlugin(plugin: LegacyStorePlugin | StorePlugin): plugin is LegacyStorePlugin {
-  return 'artifact' in plugin;
-}

frontend/src/tabs-hook.tsx

@@ -1,5 +1,4 @@
-import { Patch, QuickAccessTab, afterPatch, sleep } from 'decky-frontend-lib';
-import { memo } from 'react';
+import { QuickAccessTab, quickAccessMenuClasses, sleep } from 'decky-frontend-lib';
 
 import { QuickAccessVisibleStateProvider } from './components/QuickAccessVisibleState';
 import Logger from './logger';
@@ -28,15 +27,7 @@ interface Tab {
 class TabsHook extends Logger {
   // private keys = 7;
   tabs: Tab[] = [];
-  private quickAccess: any;
-  private tabRenderer: any;
-  private memoizedQuickAccess: any;
-  private cNode: any;
-
-  private qAPTree: any;
-  private rendererTree: any;
-
-  private cNodePatch?: Patch;
+  private oFilter: (...args: any[]) => any;
 
   constructor() {
     super('TabsHook');
@@ -46,84 +37,63 @@ class TabsHook extends Logger {
     window.__TABS_HOOK_INSTANCE = this;
 
     const self = this;
-    const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
-    let scrollRoot: any;
-    async function findScrollRoot(currentNode: any, iters: number): Promise<any> {
-      if (iters >= 30) {
-        self.error(
-          'Scroll root was not found before hitting the recursion limit, a developer will need to increase the limit.',
-        );
-        return null;
+    const oFilter = (this.oFilter = Array.prototype.filter);
+    Array.prototype.filter = function patchedFilter(...args: any[]) {
+      if (isTabsArray(this)) {
+        self.render(this);
       }
-      currentNode = currentNode?.child;
-      if (currentNode?.type?.prototype?.RemoveSmartScrollContainer) {
-        self.log(`Scroll root was found in ${iters} recursion cycles`);
-        return currentNode;
-      }
-      if (!currentNode) return null;
-      if (currentNode.sibling) {
-        let node = await findScrollRoot(currentNode.sibling, iters + 1);
-        if (node !== null) return node;
-      }
-      return await findScrollRoot(currentNode, iters + 1);
-    }
-    (async () => {
-      scrollRoot = await findScrollRoot(tree, 0);
-      while (!scrollRoot) {
-        this.log('Failed to find scroll root node, reattempting in 5 seconds');
-        await sleep(5000);
-        scrollRoot = await findScrollRoot(tree, 0);
-      }
-      let newQA: any;
-      let newQATabRenderer: any;
-      this.cNodePatch = afterPatch(scrollRoot.stateNode, 'render', (_: any, ret: any) => {
-        if (!this.quickAccess && ret.props.children.props.children[4]) {
-          this.quickAccess = ret?.props?.children?.props?.children[4].type;
-          newQA = (...args: any) => {
-            const ret = this.quickAccess.type(...args);
-            if (ret) {
-              if (!newQATabRenderer) {
-                this.tabRenderer = ret.props.children[1].children.type;
-                newQATabRenderer = (...qamArgs: any[]) => {
-                  const oFilter = Array.prototype.filter;
-                  Array.prototype.filter = function (...args: any[]) {
-                    if (isTabsArray(this)) {
-                      self.render(this, qamArgs[0].visible);
-                    }
-                    // @ts-ignore
-                    return oFilter.call(this, ...args);
-                  };
-                  // TODO remove array hack entirely and use this instead const tabs = ret.props.children.props.children[0].props.children[1].props.children[0].props.children[0].props.tabs
-                  const ret = this.tabRenderer(...qamArgs);
-                  Array.prototype.filter = oFilter;
-                  return ret;
-                };
-              }
-              this.rendererTree = ret.props.children[1].children;
-              ret.props.children[1].children.type = newQATabRenderer;
-            }
-            return ret;
-          };
-          this.memoizedQuickAccess = memo(newQA);
-          this.memoizedQuickAccess.isDeckyQuickAccess = true;
+      // @ts-ignore
+      return oFilter.call(this, ...args);
+    };
+
+    if (document.title != 'SP')
+      try {
+        const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
+        let qAMRoot: any;
+        async function findQAMRoot(currentNode: any, iters: number): Promise<any> {
+          if (iters >= 60) {
+            // currently 44
+            return null;
+          }
+          currentNode = currentNode?.child;
+          if (
+            currentNode?.memoizedProps?.className &&
+            currentNode?.memoizedProps?.className.startsWith(quickAccessMenuClasses.ViewPlaceholder)
+          ) {
+            self.log(`QAM root was found in ${iters} recursion cycles`);
+            return currentNode;
+          }
+          if (!currentNode) return null;
+          if (currentNode.sibling) {
+            let node = await findQAMRoot(currentNode.sibling, iters + 1);
+            if (node !== null) return node;
+          }
+          return await findQAMRoot(currentNode, iters + 1);
         }
-        if (ret.props.children.props.children[4]) {
-          this.qAPTree = ret.props.children.props.children[4];
-          ret.props.children.props.children[4].type = this.memoizedQuickAccess;
-        }
-        return ret;
-      });
-      this.cNode = scrollRoot;
-      this.cNode.stateNode.forceUpdate();
-      this.log('Finished initial injection');
-    })();
+        (async () => {
+          qAMRoot = await findQAMRoot(tree, 0);
+          while (!qAMRoot) {
+            this.error(
+              'Failed to find QAM root node, reattempting in 5 seconds. A developer may need to increase the recursion limit.',
+            );
+            await sleep(5000);
+            qAMRoot = await findQAMRoot(tree, 0);
+          }
+
+          while (!qAMRoot?.stateNode?.forceUpdate) {
+            qAMRoot = qAMRoot.return;
+          }
+          qAMRoot.stateNode.shouldComponentUpdate = () => true;
+          qAMRoot.stateNode.forceUpdate();
+          delete qAMRoot.stateNode.shouldComponentUpdate;
+        })();
+      } catch (e) {
+        this.log('Failed to rerender QAM', e);
+      }
   }
 
   deinit() {
-    this.cNodePatch?.unpatch();
-    if (this.qAPTree) this.qAPTree.type = this.quickAccess;
-    if (this.rendererTree) this.rendererTree.type = this.tabRenderer;
-    if (this.cNode) this.cNode.stateNode.forceUpdate();
+    Array.prototype.filter = this.oFilter;
   }
 
   add(tab: Tab) {
@@ -136,13 +106,14 @@ class TabsHook extends Logger {
     this.tabs = this.tabs.filter((tab) => tab.id !== id);
   }
 
-  render(existingTabs: any[], visible: boolean) {
+  render(existingTabs: any[]) {
     for (const { title, icon, content, id } of this.tabs) {
       existingTabs.push({
         key: id,
         title,
         tab: icon,
-        panel: <QuickAccessVisibleStateProvider visible={visible}>{content}</QuickAccessVisibleStateProvider>,
+        decky: true,
+        panel: <QuickAccessVisibleStateProvider>{content}</QuickAccessVisibleStateProvider>,
       });
     }
   }

frontend/src/toaster.tsx

@@ -1,8 +1,10 @@
-import { Patch, ToastData, afterPatch, findInReactTree, findModuleChild, sleep } from 'decky-frontend-lib';
-import { ReactNode } from 'react';
+import { Patch, ToastData, sleep } from 'decky-frontend-lib';
 
+import DeckyToaster from './components/DeckyToaster';
+import { DeckyToasterState, DeckyToasterStateContextProvider } from './components/DeckyToasterState';
 import Toast from './components/Toast';
 import Logger from './logger';
+import RouterHook from './router-hook';
 
 declare global {
   interface Window {
@@ -13,12 +15,15 @@ declare global {
 
 class Toaster extends Logger {
   private instanceRetPatch?: Patch;
+  private routerHook: RouterHook;
+  private toasterState: DeckyToasterState = new DeckyToasterState();
   private node: any;
   private settingsModule: any;
   private ready: boolean = false;
 
-  constructor() {
+  constructor(routerHook: RouterHook) {
     super('Toaster');
+    this.routerHook = routerHook;
 
     window.__TOASTER_INSTANCE?.deinit?.();
     window.__TOASTER_INSTANCE = this;
@@ -26,88 +31,135 @@ class Toaster extends Logger {
   }
 
   async init() {
-    let instance: any;
-
-    while (true) {
-      instance = findInReactTree(
-        (document.getElementById('root') as any)._reactRootContainer._internalRoot.current,
-        (x) => x?.memoizedProps?.className?.startsWith?.('toastmanager_ToastPlaceholder'),
-      );
-      if (instance) break;
-      this.debug('finding instance');
-      await sleep(2000);
-    }
-
-    this.node = instance.return.return;
-    let toast: any;
-    let renderedToast: ReactNode = null;
-    this.node.stateNode.render = (...args: any[]) => {
-      const ret = this.node.stateNode.__proto__.render.call(this.node.stateNode, ...args);
-      if (ret) {
-        this.instanceRetPatch = afterPatch(ret, 'type', (_: any, ret: any) => {
-          if (ret?.props?.children[1]?.children?.props) {
-            const currentToast = ret.props.children[1].children.props.notification;
-            if (currentToast?.decky) {
-              if (currentToast == toast) {
-                ret.props.children[1].children = renderedToast;
-              } else {
-                toast = currentToast;
-                renderedToast = <Toast toast={toast} />;
-                ret.props.children[1].children = renderedToast;
-              }
-            } else {
-              toast = null;
-              renderedToast = null;
-            }
-          }
-          return ret;
-        });
-        this.node.stateNode.shouldComponentUpdate = () => {
-          return false;
-        };
-        delete this.node.stateNode.render;
-      }
-      return ret;
-    };
-    this.node.stateNode.forceUpdate();
-    this.settingsModule = findModuleChild((m) => {
-      if (typeof m !== 'object') return undefined;
-      for (let prop in m) {
-        if (typeof m[prop]?.settings && m[prop]?.communityPreferences) return m[prop];
-      }
-    });
-    this.log('Initialized');
-    this.ready = true;
+    this.routerHook.addGlobalComponent('DeckyToaster', () => (
+      <DeckyToasterStateContextProvider deckyToasterState={this.toasterState}>
+        <DeckyToaster />
+      </DeckyToasterStateContextProvider>
+    ));
+    // let instance: any;
+    // while (true) {
+    //   instance = findInReactTree(
+    //     (document.getElementById('root') as any)._reactRootContainer._internalRoot.current,
+    //     (x) => x?.memoizedProps?.className?.startsWith?.('toastmanager_ToastPlaceholder'),
+    //   );
+    //   if (instance) break;
+    //   this.debug('finding instance');
+    //   await sleep(2000);
+    // }
+    // // const windowManager = findModuleChild((m) => {
+    // //   if (typeof m !== 'object') return false;
+    // //   for (let prop in m) {
+    // //     if (m[prop]?.prototype?.GetRenderElement) return m[prop];
+    // //   }
+    // //   return false;
+    // // });
+    // this.node = instance.return.return;
+    // let toast: any;
+    // let renderedToast: ReactNode = null;
+    // console.log(instance, this.node);
+    // // replacePatch(window.SteamClient.BrowserView, "Destroy", (args: any[]) => {
+    // //   console.debug("destroy", args)
+    // //   return callOriginal;
+    // // })
+    // // let node = this.node.child.updateQueue.lastEffect;
+    // // while (node.next && !node.deckyPatched) {
+    // //   node = node.next;
+    // //   if (node.deps[1] == "notificationtoasts") {
+    // //     console.log("Deleting destroy");
+    // //     node.deckyPatched = true;
+    // //     node.create = () => {console.debug("VVVVVVVVVVV")};
+    // //     node.destroy = () => {console.debug("AAAAAAAAAAAAAAAAaaaaaaaaaaaaaaa")};
+    // //   }
+    // // }
+    // this.node.stateNode.render = (...args: any[]) => {
+    //   const ret = this.node.stateNode.__proto__.render.call(this.node.stateNode, ...args);
+    //   console.log('toast', ret);
+    //     if (ret) {
+    //       console.log(ret)
+    //       // this.instanceRetPatch = replacePatch(ret, 'type', (innerArgs: any) => {
+    //       //   console.log("inner toast", innerArgs)
+    //       //   // @ts-ignore
+    //       //   const oldEffect = window.SP_REACT.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current.useEffect;
+    //       //   // @ts-ignore
+    //       //   window.SP_REACT.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current.useEffect = (effect, deps) => {
+    //       //     console.log(effect, deps)
+    //       //     if (deps?.[1] == "notificationtoasts") {
+    //       //       console.log("run")
+    //       //       effect();
+    //       //     }
+    //       //     return oldEffect(effect, deps);
+    //       //   }
+    //       //   const ret = this.instanceRetPatch?.original(...args);
+    //       //   console.log("inner ret", ret)
+    //       //   // @ts-ignore
+    //       //   window.SP_REACT.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current.useEffect = oldEffect;
+    //       //   return ret
+    //       // });
+    //     }
+    //   //       console.log("toast ret", ret)
+    //   //       if (ret?.props?.children[1]?.children?.props) {
+    //   //         const currentToast = ret.props.children[1].children.props.notification;
+    //   //         if (currentToast?.decky) {
+    //   //           if (currentToast == toast) {
+    //   //             ret.props.children[1].children = renderedToast;
+    //   //           } else {
+    //   //             toast = currentToast;
+    //   //             renderedToast = <Toast toast={toast} />;
+    //   //             ret.props.children[1].children = renderedToast;
+    //   //           }
+    //   //         } else {
+    //   //           toast = null;
+    //   //           renderedToast = null;
+    //   //         }
+    //   //       }
+    //   //       return ret;
+    //   //     });
+    //   //   }
+    //   return ret;
+    // };
+    // this.settingsModule = findModuleChild((m) => {
+    //   if (typeof m !== 'object') return undefined;
+    //   for (let prop in m) {
+    //     if (typeof m[prop]?.settings && m[prop]?.communityPreferences) return m[prop];
+    //   }
+    // });
+    // // const idx = FocusNavController.m_ActiveContext.m_rgGamepadNavigationTrees.findIndex((x: any) => x.m_ID == "ToastContainer");
+    // // if (idx > -1) {
+    // //   FocusNavController.m_ActiveContext.m_rgGamepadNavigationTrees.splice(idx, 1)
+    // // }
+    // this.node.stateNode.forceUpdate();
+    // this.node.stateNode.shouldComponentUpdate = () => {
+    //   return false;
+    // };
+    // this.log('Initialized');
+    // this.ready = true;
   }
 
-  async toast(toast: ToastData) {
-    while (!this.ready) {
-      await sleep(100);
-    }
-    const settings = this.settingsModule?.settings;
-    let toastData = {
-      nNotificationID: window.NotificationStore.m_nNextTestNotificationID++,
-      rtCreated: Date.now(),
-      eType: 15,
-      nToastDurationMS: toast.duration || 5e3,
-      data: toast,
-      decky: true,
-    };
-    // @ts-ignore
-    toastData.data.appid = () => 0;
-    if (
-      (settings?.bDisableAllToasts && !toast.critical) ||
-      (settings?.bDisableToastsInGame && !toast.critical && window.NotificationStore.BIsUserInGame())
-    )
-      return;
-    window.NotificationStore.m_rgNotificationToasts.push(toastData);
-    window.NotificationStore.DispatchNextToast();
+  toast(toast: ToastData) {
+    toast.duration = toast.duration || 5e3;
+    this.toasterState.addToast(toast);
+    // const settings = this.settingsModule?.settings;
+    // let toastData = {
+    //   nNotificationID: window.NotificationStore.m_nNextTestNotificationID++,
+    //   rtCreated: Date.now(),
+    //   eType: 15,
+    //   nToastDurationMS: toast.duration || 5e3,
+    //   data: toast,
+    //   decky: true,
+    // };
+    // // @ts-ignore
+    // toastData.data.appid = () => 0;
+    // if (
+    //   (settings?.bDisableAllToasts && !toast.critical) ||
+    //   (settings?.bDisableToastsInGame && !toast.critical && window.NotificationStore.BIsUserInGame())
+    // )
+    //   return;
+    // window.NotificationStore.m_rgNotificationToasts.push(toastData);
+    // window.NotificationStore.DispatchNextToast();
   }
 
   deinit() {
-    this.instanceRetPatch?.unpatch();
-    this.node && delete this.node.stateNode.shouldComponentUpdate;
-    this.node && this.node.stateNode.forceUpdate();
+    this.routerHook.removeGlobalComponent('DeckyToaster');
   }
 }
 

frontend/src/utils/hooks/useSetting.ts

@@ -1,25 +1,14 @@
 import { useEffect, useState } from 'react';
 
-interface GetSettingArgs<T> {
-  key: string;
-  default: T;
-}
+import { getSetting, setSetting } from '../settings';
 
-interface SetSettingArgs<T> {
-  key: string;
-  value: T;
-}
-
-export function useSetting<T>(key: string, def: T): [value: T | null, setValue: (value: T) => Promise<void>] {
+export function useSetting<T>(key: string, def: T): [value: T, setValue: (value: T) => Promise<void>] {
   const [value, setValue] = useState(def);
 
   useEffect(() => {
     (async () => {
-      const res = (await window.DeckyPluginLoader.callServerMethod('get_setting', {
-        key,
-        default: def,
-      } as GetSettingArgs<T>)) as { result: T };
-      setValue(res.result);
+      const res = await getSetting<T>(key, def);
+      setValue(res);
     })();
   }, []);
 
@@ -27,10 +16,7 @@ export function useSetting<T>(key: string, def: T): [value: T | null, setValue:
     value,
     async (val: T) => {
       setValue(val);
-      await window.DeckyPluginLoader.callServerMethod('set_setting', {
-        key,
-        value: val,
-      } as SetSettingArgs<T>);
+      await setSetting(key, val);
     },
   ];
 }

frontend/src/utils/settings.ts

@@ -0,0 +1,24 @@
+interface GetSettingArgs<T> {
+  key: string;
+  default: T;
+}
+
+interface SetSettingArgs<T> {
+  key: string;
+  value: T;
+}
+
+export async function getSetting<T>(key: string, def: T): Promise<T> {
+  const res = (await window.DeckyPluginLoader.callServerMethod('get_setting', {
+    key,
+    default: def,
+  } as GetSettingArgs<T>)) as { result: T };
+  return res.result;
+}
+
+export async function setSetting<T>(key: string, value: T): Promise<void> {
+  await window.DeckyPluginLoader.callServerMethod('set_setting', {
+    key,
+    value,
+  } as SetSettingArgs<T>);
+}

frontend/src/utils/windows.ts

@@ -0,0 +1,7 @@
+export function findSP(): Window {
+  // old (SP as host)
+  if (document.title == 'SP') return window;
+  // new (SP as popup)
+  return FocusNavController.m_ActiveContext.m_rgGamepadNavigationTrees.find((x: any) => x.m_ID == 'root_1_').Root
+    .Element.ownerDocument.defaultView;
+}