add patch caching

* Use settingsStore directly

* Change toast etype, add showToast/playSound

* Update DFL and rebase

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,36 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Description**
+[A clear and concise description of what the bug is.]
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+[A clear and concise description of what you expected to happen.]
+
+**Screenshots**
+[If applicable, add screenshots to help explain your problem.]
+
+**Version information**
+ - SteamOS Version: ``[Run ``uname -a`` and place the output here. Leave the single quotations outside.]``
+ - Selected Update Channel: [Stable, Beta or Preview.]
+
+**Logs**
+[Please reboot your deck (if possible) when attempting to recreate the issue, then run
+``cd ~ && journalctl -b0  -u plugin_loader.service > backendlog.txt``. This will save the log file to ``~`` aka ``/home/deck``. Please upload the file here in place of this textblock.]
+
+**Additional context**
+Have you modified the read-only filesystem at any point?  
+[Yes or No.]

.github/workflows/build.yml

@@ -31,7 +31,7 @@ permissions:
 jobs:
   build:
     name: Build PluginLoader
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
 
     steps:
     - name: Print input
@@ -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

@@ -14,7 +14,9 @@
             "label": "localrun",
             "type": "shell",
             "group": "none",
-            "dependsOn" : ["buildall"],
+            "dependsOn": [
+                "buildall"
+            ],
             "detail": "Check for local runs, create a plugins folder",
             "command": "mkdir -p plugins",
             "problemMatcher": []
@@ -48,6 +50,16 @@
             "command": "cd frontend && pnpm i",
             "problemMatcher": []
         },
+        {
+            "script": "watch",
+            "type": "npm",
+            "path": "frontend",
+            "group": "build",
+            "problemMatcher": [],
+            "label": "watchfrontend",
+            "detail": "rollup -c -w",
+            "isBackground": true
+        },
         {
             "label": "buildfrontend",
             "type": "npm",
@@ -55,8 +67,7 @@
             "detail": "rollup -c",
             "script": "build",
             "path": "frontend",
-            "problemMatcher": [],
-            
+            "problemMatcher": []
         },
         {
             "label": "buildall",
@@ -95,7 +106,9 @@
             "detail": "Run indev PluginLoader on Deck",
             "type": "shell",
             "group": "none",
-            "dependsOn" : ["checkforsettings"],
+            "dependsOn": [
+                "checkforsettings"
+            ],
             "command": "ssh deck@${config:deckip} -p ${config:deckport} ${config:deckkey} 'export PLUGIN_PATH=${config:deckdir}/homebrew/dev/plugins; export CHOWN_PLUGIN_PATH=0; export LOG_LEVEL=DEBUG; cd ${config:deckdir}/homebrew/services; echo '${config:deckpass}' | sudo -SE python3 ${config:deckdir}/homebrew/dev/pluginloader/backend/main.py'",
             "problemMatcher": []
         },
@@ -108,6 +121,20 @@
             "problemMatcher": []
         },
         // ALL-IN-ONES
+        {
+            "label": "deployandrun",
+            "detail": "Deploy and run, skipping JS build. Useful when combined with npm:watch",
+            "dependsOrder": "sequence",
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "dependsOn": [
+                "deploy",
+                "runpydeck"
+            ],
+            "problemMatcher": []
+        },
         {
             "label": "updateremote",
             "detail": "Build and deploy",
@@ -115,7 +142,7 @@
             "group": "none",
             "dependsOn": [
                 "buildall",
-                "deploy",
+                "deploy"
             ],
             "problemMatcher": []
         },
@@ -128,7 +155,7 @@
                 "isDefault": true
             },
             "dependsOn": [
-                "buildall",
+                "buildfrontend",
                 "deploy",
                 "runpydeck"
             ],
@@ -152,4 +179,4 @@
             "problemMatcher": []
         }
     ]
-}
+}

README.md

@@ -17,7 +17,7 @@
 
 ## 📖 About
 
-Decky Loader is a homebrew plugin launcher for the Steam Deck. It can be used to [stylize your menus](https://github.com/suchmememanyskill/SDH-CssLoader), [change system sounds](https://github.com/EMERALD0874/SDH-AudioLoader), [adjust your screen saturation](https://github.com/libvibrant/vibrantDeck), [change additional system settings](https://github.com/NGnius/PowerTools), and [more](https://beta.deckbrew.xyz/).
+Decky Loader is a homebrew plugin launcher for the Steam Deck. It can be used to [stylize your menus](https://github.com/suchmememanyskill/SDH-CssLoader), [change system sounds](https://github.com/EMERALD0874/SDH-AudioLoader), [adjust your screen saturation](https://github.com/libvibrant/vibrantDeck), [change additional system settings](https://github.com/NGnius/PowerTools), and [more](https://plugins.deckbrew.xyz/).
 
 For more information about Decky Loader as well as documentation and development tools, please visit [our wiki](https://deckbrew.xyz).
 
@@ -33,7 +33,7 @@ For more information about Decky Loader as well as documentation and development
 
 - Crankshaft is incompatible with Decky Loader. If you are using Crankshaft, please uninstall it before installing Decky Loader.
 - Syncthing may use port 8080 on Steam Deck, which Decky Loader needs to function. If you are using Syncthing as a service, please change its port to something else.
-- If you are using any software that uses port 1337, please change its port to something else or uninstall it.
+- If you are using any software that uses port 1337 or 8080, please change its port to something else or uninstall it.
 
 ## 💾 Installation
 

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")
 
@@ -55,9 +55,9 @@ class PluginBrowser:
             pluginBinPath = path.join(pluginBasePath, 'bin')
 
             if access(packageJsonPath, R_OK):
-                with open(packageJsonPath, 'r') as f:
+                with open(packageJsonPath, "r", encoding="utf-8") 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):
@@ -93,18 +93,18 @@ class PluginBrowser:
     def find_plugin_folder(self, name):
         for folder in listdir(self.plugin_path):
             try:
-                with open(path.join(self.plugin_path, folder, 'plugin.json'), 'r') as f:
+                with open(path.join(self.plugin_path, folder, 'plugin.json'), "r", encoding="utf-8") as f:
                     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/helpers.py

@@ -1,3 +1,5 @@
+import grp
+import pwd
 import re
 import ssl
 import subprocess
@@ -56,6 +58,14 @@ def get_user() -> str:
         raise ValueError("helpers.get_user method called before user variable was set. Run helpers.set_user first.")
     return user
 
+#Get the user owner of the given file path.
+def get_user_owner(file_path) -> str:
+    return pwd.getpwuid(os.stat(file_path).st_uid)[0]
+
+#Get the user group of the given file path.
+def get_user_group(file_path) -> str:
+    return grp.getgrgid(os.stat(file_path).st_gid)[0]
+
 # Set the global user group. get_user must be called first
 def set_user_group() -> str:
     global group
@@ -94,18 +104,18 @@ async def download_remote_binary_to_path(url, binHash, path) -> bool:
         if os.access(os.path.dirname(path), os.W_OK):
             async with ClientSession() as client:
                 res = await client.get(url, ssl=get_ssl_context())
-                if res.status == 200:
-                    data = BytesIO(await res.read())
-                    remoteHash = sha256(data.getbuffer()).hexdigest()
-                    if binHash == remoteHash:
-                        data.seek(0)
-                        with open(path, 'wb') as f:
-                            f.write(data.getbuffer())
-                            rv = True
-                    else:
-                        raise Exception(f"Fatal Error: Hash Mismatch for remote binary {path}@{url}")
+            if res.status == 200:
+                data = BytesIO(await res.read())
+                remoteHash = sha256(data.getbuffer()).hexdigest()
+                if binHash == remoteHash:
+                    data.seek(0)
+                    with open(path, 'wb') as f:
+                        f.write(data.getbuffer())
+                        rv = True
                 else:
-                    rv = False
+                    raise Exception(f"Fatal Error: Hash Mismatch for remote binary {path}@{url}")
+            else:
+                rv = False
     except:
         rv = False
 

backend/injector.py

@@ -1,20 +1,27 @@
-#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
+from aiohttp import ClientSession, WSMsgType
+from aiohttp.client_exceptions import ClientConnectorError, ClientOSError
+from asyncio.exceptions import TimeoutError
+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,34 +31,318 @@ class Tab:
         self.client = ClientSession()
         self.websocket = await self.client.ws_connect(self.ws_url)
 
+    async def close_websocket(self):
+        await self.websocket.close()
+        await self.client.close()
+
     async def listen_for_message(self):
         async for message in self.websocket:
-            yield message
-
+            data = message.json()
+            yield data
+        logger.warn(f"The Tab {self.title} socket has been disconnected while listening for messages.")
+        await self.close_websocket()
+            
     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):
-        if manage_socket:
-            await self.open_websocket()
+        try:
+            if manage_socket:
+                await self.open_websocket()
 
-        res = await self._send_devtools_cmd({
-            "id": 1,
-            "method": "Runtime.evaluate",
-            "params": {
-                "expression": js,
-                "userGesture": True,
-                "awaitPromise": run_async
-            }
-        }, get_result)
+            res = await self._send_devtools_cmd({
+                "method": "Runtime.evaluate",
+                "params": {
+                    "expression": js,
+                    "userGesture": True,
+                    "awaitPromise": run_async
+                }
+            }, get_result)
 
-        if manage_socket:
-            await self.client.close()
+        finally:
+            if manage_socket:
+                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):
+        try:
+            if manage_socket:
+                await self.open_websocket()
+
+            res = await self._send_devtools_cmd({
+                "method": "Page.close",
+            }, False)
+
+        finally:
+            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):
+        try:
+            if manage_socket:
+                await self.open_websocket()
+
+            await self._send_devtools_cmd({
+                "method": "Page.reload",
+            }, False)
+
+        finally:
+            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
+        """
+        try:
+            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)
+
+        finally:
+            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
+        """
+        try:
+
+            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)
+
+        finally:
+            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`)
+        """
+
+        try:
+            if manage_socket:
+                await self.open_websocket()
+
+            res = await self._send_devtools_cmd({
+                "method": "Page.removeScriptToEvaluateOnNewDocument",
+                "params": {
+                    "identifier": script_id
+                }
+            }, False)
+
+        finally:
+            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,59 +350,58 @@ class Tab:
     def __repr__(self):
         return self.title
 
-async def get_tabs():
-    async with ClientSession() as web:
-        res = {}
 
-        while True:
-            try:
-                res = await web.get(f"{BASE_ADDRESS}/json")
-            except ClientConnectorError:
-                logger.debug("ClientConnectorError excepted.")
+async def get_tabs() -> List[Tab]:
+    res = {}
+
+    na = False
+    while True:
+        try:
+            async with ClientSession() as web:
+                res = await web.get(f"{BASE_ADDRESS}/json", timeout=3)
+        except ClientConnectorError:
+            if not na:
                 logger.debug("Steam isn't available yet. Wait for a moment...")
-                logger.error(format_exc())
-                await sleep(5)
-            else:
-                break
-
-        if res.status == 200:
-            r = await res.json()
-            return [Tab(i) for i in r]
+                na = True
+            await sleep(5)
+        except ClientOSError:
+            logger.warn(f"The request to {BASE_ADDRESS}/json was reset")
+            await sleep(1)
+        except TimeoutError:
+            logger.warn(f"The request to {BASE_ADDRESS}/json timed out")
+            await sleep(1)
         else:
-            raise Exception(f"/json did not return 200. {await res.text()}")
+            break
 
-async def get_tab(tab_name):
+    if res.status == 200:
+        r = await res.json()
+        return [Tab(i) for i in r]
+    else:
+        raise Exception(f"/json did not return 200. {await res.text()}")
+
+
+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
 
 
@@ -118,10 +118,10 @@ class Loader:
     def handle_frontend_bundle(self, request):
         plugin = self.plugins[request.match_info["plugin_name"]]
 
-        with open(path.join(self.plugin_path, plugin.plugin_directory, "dist/index.js"), 'r') as bundle:
+        with open(path.join(self.plugin_path, plugin.plugin_directory, "dist/index.js"), "r", encoding="utf-8") as bundle:
             return web.Response(text=bundle.read(), content_type="application/javascript")
 
-    def import_plugin(self, file, plugin_directory, refresh=False):
+    def import_plugin(self, file, plugin_directory, refresh=False, batch=False):
         try:
             plugin = PluginWrapper(file, plugin_directory, self.plugin_path)
             if plugin.name in self.plugins:
@@ -135,13 +135,15 @@ class Loader:
                 self.logger.info(f"Plugin {plugin.name} is passive")
             self.plugins[plugin.name] = plugin.start()
             self.logger.info(f"Loaded {plugin.name}")
-            self.loop.create_task(self.dispatch_plugin(plugin.name if not plugin.legacy else "$LEGACY_" + plugin.name, plugin.version))
+            if not batch:
+                self.loop.create_task(self.dispatch_plugin(plugin.name if not plugin.legacy else "$LEGACY_" + plugin.name, plugin.version))
         except Exception as e:
             self.logger.error(f"Could not load {file}. {e}")
             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}")
@@ -149,7 +151,7 @@ class Loader:
         directories = [i for i in listdir(self.plugin_path) if path.isdir(path.join(self.plugin_path, i)) and path.isfile(path.join(self.plugin_path, i, "plugin.json"))]
         for directory in directories:
             self.logger.info(f"found plugin: {directory}")
-            self.import_plugin(path.join(self.plugin_path, directory, "main.py"), directory)
+            self.import_plugin(path.join(self.plugin_path, directory, "main.py"), directory, False, True)
 
     async def handle_reloads(self):
         while True:
@@ -184,7 +186,7 @@ class Loader:
     """
     async def load_plugin_main_view(self, request):
         plugin = self.plugins[request.match_info["name"]]
-        with open(path.join(self.plugin_path, plugin.plugin_directory, plugin.main_view_html), 'r') as template:
+        with open(path.join(self.plugin_path, plugin.plugin_directory, plugin.main_view_html), "r", encoding="utf-8") as template:
             template_data = template.read()
             ret = f"""
             <script src="/legacy/library.js"></script>
@@ -200,13 +202,13 @@ class Loader:
         self.logger.info(path)
         ret = ""
         file_path = path.join(self.plugin_path, plugin.plugin_directory, route_path)
-        with open(file_path, 'r') as resource_data:
+        with open(file_path, "r", encoding="utf-8") as resource_data:
             ret = resource_data.read()
 
         return web.Response(text=ret)
 
     async def get_steam_resource(self, request):
-        tab = await get_tab("QuickAccess")
+        tab = await get_tab("SP")
         try:
             return web.Response(text=await tab.get_steam_resource(f"https://steamloopback.host/{request.match_info['path']}"), content_type="text/html")
         except Exception as e:

backend/main.py

@@ -4,7 +4,7 @@ from subprocess import call
 if hasattr(sys, '_MEIPASS'):
     call(['chmod', '-R', '755', sys._MEIPASS])
 # Full imports
-from asyncio import get_event_loop, sleep
+from asyncio import new_event_loop, set_event_loop, sleep
 from json import dumps, loads
 from logging import DEBUG, INFO, basicConfig, getLogger
 from os import getenv, chmod, path
@@ -12,7 +12,7 @@ from traceback import format_exc
 
 import aiohttp_cors
 # Partial imports
-from aiohttp import ClientSession
+from aiohttp import client_exceptions, WSMsgType
 from aiohttp.web import Application, Response, get, run_app, static
 from aiohttp_jinja2 import setup as jinja_setup
 
@@ -21,8 +21,8 @@ from browser import PluginBrowser
 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
+                     stop_systemd_unit, start_systemd_unit)
+from injector import get_gamepadui_tab, Tab, get_tabs
 from loader import Loader
 from settings import SettingsManager
 from updater import Updater
@@ -56,15 +56,15 @@ basicConfig(
 
 logger = getLogger("Main")
 
-async def chown_plugin_dir(_):
+async def chown_plugin_dir():
     code_chown = call(["chown", "-R", USER+":"+GROUP, CONFIG["plugin_path"]])
     code_chmod = call(["chmod", "-R", "555", CONFIG["plugin_path"]])
     if code_chown != 0 or code_chmod != 0:
         logger.error(f"chown/chmod exited with a non-zero exit code (chown: {code_chown}, chmod: {code_chmod})")
 
 class PluginManager:
-    def __init__(self) -> None:
-        self.loop = get_event_loop()
+    def __init__(self, loop) -> None:
+        self.loop = loop
         self.web_app = Application()
         self.web_app.middlewares.append(csrf_middleware)
         self.cors = aiohttp_cors.setup(self.web_app, defaults={
@@ -81,12 +81,19 @@ class PluginManager:
         self.updater = Updater(self)
 
         jinja_setup(self.web_app)
-        if CONFIG["chown_plugin_path"] == True:
-            self.web_app.on_startup.append(chown_plugin_dir)
-        self.loop.create_task(self.loader_reinjector())
-        self.loop.create_task(self.load_plugins())
-        if not self.settings.getSetting("cef_forward", False):
-            self.loop.create_task(stop_systemd_unit(REMOTE_DEBUGGER_UNIT))
+
+        async def startup(_):
+            if self.settings.getSetting("cef_forward", False):
+                self.loop.create_task(start_systemd_unit(REMOTE_DEBUGGER_UNIT))
+            else:
+                self.loop.create_task(stop_systemd_unit(REMOTE_DEBUGGER_UNIT))
+            if CONFIG["chown_plugin_path"] == True:
+                chown_plugin_dir()
+            self.loop.create_task(self.loader_reinjector())
+            self.loop.create_task(self.load_plugins())
+
+        self.web_app.on_startup.append(startup)
+
         self.loop.set_exception_handler(self.exception_handler)
         self.web_app.add_routes([get("/auth/token", self.get_auth_token)])
 
@@ -103,32 +110,73 @@ class PluginManager:
     async def get_auth_token(self, request):
         return Response(text=get_csrf_token())
 
-    async def wait_for_server(self):
-        async with ClientSession() as web:
-            while True:
-                try:
-                    await web.get(f"http://{CONFIG['server_host']}:{CONFIG['server_port']}")
-                    return
-                except Exception as e:
-                    await sleep(0.1)
-
     async def load_plugins(self):
-        await self.wait_for_server()
+        # await self.wait_for_server()
+        logger.debug("Loading plugins")
         self.plugin_loader.import_plugins()
         # 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
+            nf = False
+            dc = False
+            while not tab:
+                try:
+                    tab = await get_gamepadui_tab()
+                except (client_exceptions.ClientConnectorError, client_exceptions.ServerDisconnectedError):
+                    if not dc:
+                        logger.debug("Couldn't connect to debugger, waiting...")
+                        dc = True
+                    pass
+                except ValueError:
+                    if not nf:
+                        logger.debug("Couldn't find GamepadUI tab, waiting...")
+                        nf = True
+                    pass
+                if not tab:
+                    await sleep(5)
+            await tab.open_websocket()
+            await tab.enable()
+            await self.inject_javascript(tab, True)
+            try:
+                async for msg in tab.listen_for_message():
+                    # this gets spammed a lot
+                    if msg.get("method", None) != "Page.navigatedWithinDocument":
+                        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("CEF has requested that we detach.")
+                            await tab.close_websocket()
+                            break
+                # If this is a forceful disconnect the loop will just stop without any failure message. In this case, injector.py will handle this for us so we don't need to close the socket.
+                # This is because of https://github.com/aio-libs/aiohttp/blob/3ee7091b40a1bc58a8d7846e7878a77640e96996/aiohttp/client_ws.py#L321
+                logger.info("CEF has disconnected...")
+                # At this point the loop starts again and we connect to the freshly started Steam client once it is ready.
+            except Exception as e:
+                logger.error("Exception while reading page events " + format_exc())
+                await tab.close_websocket()
+                pass
+        # 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 not t.title or (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(), 100)}else{window.deckyHasLoaded = true;(async()=>{try{while(!window.SP_REACT){await new Promise(r => setTimeout(r, 10))};await import('http://localhost:1337/frontend/index.js')}catch(e){console.error(e)};})();}}catch(e){console.error(e)}", False, False, False)
         except:
             logger.info("Failed to inject JavaScript into tab\n" + format_exc())
             pass
@@ -137,4 +185,6 @@ class PluginManager:
         return run_app(self.web_app, host=CONFIG["server_host"], port=CONFIG["server_port"], loop=self.loop, access_log=None)
 
 if __name__ == "__main__":
-    PluginManager().run()
+    loop = new_event_loop()
+    set_event_loop(loop)
+    PluginManager(loop).run()

backend/plugin.py

@@ -27,9 +27,9 @@ class PluginWrapper:
 
         self.version = None
 
-        json = load(open(path.join(plugin_path, plugin_directory, "plugin.json"), "r"))
+        json = load(open(path.join(plugin_path, plugin_directory, "plugin.json"), "r", encoding="utf-8"))
         if path.isfile(path.join(plugin_path, plugin_directory, "package.json")):
-            package_json = load(open(path.join(plugin_path, plugin_directory, "package.json"), "r"))
+            package_json = load(open(path.join(plugin_path, plugin_directory, "package.json"), "r", encoding="utf-8"))
             self.version = package_json["version"]
 
 
@@ -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)
@@ -102,7 +112,7 @@ class PluginWrapper:
                 d["res"] = str(e)
                 d["success"] = False
             finally:
-                writer.write((dumps(d)+"\n").encode("utf-8"))
+                writer.write((dumps(d, ensure_ascii=False)+"\n").encode("utf-8"))
                 await writer.drain()
 
     async def _open_socket_if_not_exists(self):
@@ -130,7 +140,7 @@ class PluginWrapper:
             return
         async def _(self):
             if await self._open_socket_if_not_exists():
-                self.writer.write((dumps({"stop": True})+"\n").encode("utf-8"))
+                self.writer.write((dumps({ "stop": True }, ensure_ascii=False)+"\n").encode("utf-8"))
                 await self.writer.drain()
                 self.writer.close()
         get_event_loop().create_task(_(self))
@@ -141,7 +151,7 @@ class PluginWrapper:
         async with self.method_call_lock:
             if await self._open_socket_if_not_exists():
                 self.writer.write(
-                    (dumps({"method": method_name, "args": kwargs})+"\n").encode("utf-8"))
+                    (dumps({ "method": method_name, "args": kwargs }, ensure_ascii=False) + "\n").encode("utf-8"))
                 await self.writer.drain()
                 line = bytearray()
                 while True:

backend/settings.py

@@ -1,40 +1,56 @@
-import imp
 from json import dump, load
-from os import mkdir, path
+from os import mkdir, path, listdir, rename
+from shutil import chown
 
-from helpers import get_home_path, get_homebrew_path, get_user, set_user
+from helpers import get_home_path, get_homebrew_path, get_user, set_user, get_user_owner
 
 
 class SettingsManager:
     def __init__(self, name, settings_directory = None) -> None:
         set_user()
         USER = get_user()
+        wrong_dir = get_homebrew_path(get_home_path(USER))
         if settings_directory == None:
-            settings_directory = get_homebrew_path(get_home_path(USER))
+            settings_directory = path.join(wrong_dir, "settings")
+
         self.path = path.join(settings_directory, name + ".json")
 
+        #Create the folder with the correct permission
         if not path.exists(settings_directory):
             mkdir(settings_directory)
+            chown(settings_directory, USER, USER)
+
+        #Copy all old settings file in the root directory to the correct folder
+        for file in listdir(wrong_dir):
+            if file.endswith(".json"):
+                rename(path.join(wrong_dir,file),
+                       path.join(settings_directory, file)) 
+                self.path = path.join(settings_directory, name + ".json")
+
+
+        #If the owner of the settings directory is not the user, then set it as the user:
+        if get_user_owner(settings_directory) != USER:
+            chown(settings_directory, USER, USER)
 
         self.settings = {}
 
         try:
-            open(self.path, "x")
+            open(self.path, "x", encoding="utf-8")
         except FileExistsError as e:
             self.read()
             pass
 
     def read(self):
         try:
-            with open(self.path, "r") as file:
+            with open(self.path, "r", encoding="utf-8") as file:
                 self.settings = load(file)
         except Exception as e:
             print(e)
             pass
 
     def commit(self):
-        with open(self.path, "w+") as file:
-            dump(self.settings, file, indent=4)
+        with open(self.path, "w+", encoding="utf-8") as file:
+            dump(self.settings, file, indent=4, ensure_ascii=False)
 
     def getSetting(self, key, default):
         return self.settings.get(key, default)

backend/updater.py

@@ -1,3 +1,5 @@
+import os
+import shutil
 import uuid
 from asyncio import sleep
 from ensurepip import version
@@ -9,7 +11,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")
@@ -30,7 +32,7 @@ class Updater:
         self.allRemoteVers = None
         try:
             logger.info(getcwd())
-            with open(path.join(getcwd(), ".loader.version"), 'r') as version_file:
+            with open(path.join(getcwd(), ".loader.version"), "r", encoding="utf-8") as version_file:
                 self.localVer = version_file.readline().replace("\n", "")
         except:
             self.localVer = False
@@ -79,6 +81,20 @@ class Updater:
     async def _get_branch(self, manager: SettingsManager):
         return self.get_branch(manager)
 
+    # retrieve relevant service file's url for each branch
+    def get_service_url(self):
+        logger.debug("Getting service URL")
+        branch = self.get_branch(self.context.settings)
+        match branch:
+            case 0:
+                url = "https://raw.githubusercontent.com/SteamDeckHomebrew/decky-loader/main/dist/plugin_loader-release.service"
+            case 1 | 2:
+                url = "https://raw.githubusercontent.com/SteamDeckHomebrew/decky-loader/main/dist/plugin_loader-prerelease.service"
+            case _:
+                logger.error("You have an invalid branch set... Defaulting to prerelease service, please send the logs to the devs!")
+                url = "https://raw.githubusercontent.com/SteamDeckHomebrew/decky-loader/main/dist/plugin_loader-prerelease.service"
+        return str(url)
+
     async def get_version(self):
         if self.localVer:
             return {
@@ -96,25 +112,20 @@ class Updater:
         async with ClientSession() as web:
             async with web.request("GET", "https://api.github.com/repos/SteamDeckHomebrew/decky-loader/releases", ssl=helpers.get_ssl_context()) as res:
                 remoteVersions = await res.json()
-                self.allRemoteVers = remoteVersions
-                logger.debug("determining release type to find, branch is %i" % selectedBranch)
-                if selectedBranch == 0:
-                    logger.debug("release type: release")
-                    self.remoteVer = next(filter(lambda ver: ver["tag_name"].startswith("v") and not ver["prerelease"] and ver["tag_name"], remoteVersions), None)
-                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")
-                await tab.evaluate_js(f"window.DeckyPluginLoader.notifyUpdates()", False, True, False)
+        self.allRemoteVers = remoteVersions
+        logger.debug("determining release type to find, branch is %i" % selectedBranch)
+        if selectedBranch == 0:
+            logger.debug("release type: release")
+            self.remoteVer = next(filter(lambda ver: ver["tag_name"].startswith("v") and not ver["prerelease"] and ver["tag_name"], remoteVersions), None)
+        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)
+        else:
+            logger.error("release type: NOT FOUND")
+            raise ValueError("no valid branch found")
+        logger.info("Updated remote version information")
+        tab = await get_gamepadui_tab()
+        await tab.evaluate_js(f"window.DeckyPluginLoader.notifyUpdates()", False, True, False)
         return await self.get_version()
 
     async def version_reloader(self):
@@ -127,14 +138,44 @@ class Updater:
             await sleep(60 * 60 * 6) # 6 hours
 
     async def do_update(self):
+        logger.debug("Starting update.")
         version = self.remoteVer["tag_name"]
         download_url = self.remoteVer["assets"][0]["browser_download_url"]
+        service_url = self.get_service_url()
+        logger.debug("Retrieved service URL")
 
-        tab = await get_tab("SP")
+        tab = await get_gamepadui_tab()
         await tab.open_websocket()
         async with ClientSession() as web:
+            logger.debug("Downloading systemd service")
+            # download the relevant systemd service depending upon branch
+            async with web.request("GET", service_url, ssl=helpers.get_ssl_context(), allow_redirects=True) as res:
+                logger.debug("Downloading service file")
+                data = await res.content.read()
+            logger.debug(str(data))
+            service_file_path = path.join(getcwd(), "plugin_loader.service")
+            try:
+                with open(path.join(getcwd(), "plugin_loader.service"), "wb") as out:
+                    out.write(data)
+            except Exception as e:
+                logger.error(f"Error at %s", exc_info=e)
+            with open(path.join(getcwd(), "plugin_loader.service"), "r", encoding="utf-8") as service_file:
+                service_data = service_file.read()
+            service_data = service_data.replace("${HOMEBREW_FOLDER}", "/home/"+helpers.get_user()+"/homebrew")
+            with open(path.join(getcwd(), "plugin_loader.service"), "w", encoding="utf-8") as service_file:
+                    service_file.write(service_data)
+                    
+            logger.debug("Saved service file")
+            logger.debug("Copying service file over current file.")
+            shutil.copy(service_file_path, "/etc/systemd/system/plugin_loader.service")
+            if not os.path.exists(path.join(getcwd(), ".systemd")):
+                os.mkdir(path.join(getcwd(), ".systemd"))
+            shutil.move(service_file_path, path.join(getcwd(), ".systemd")+"/plugin_loader.service")
+            
+            logger.debug("Downloading binary")
             async with web.request("GET", download_url, ssl=helpers.get_ssl_context(), allow_redirects=True) as res:
                 total = int(res.headers.get('content-length', 0))
+                # we need to not delete the binary until we have downloaded the new binary!
                 try:
                     remove(path.join(getcwd(), "PluginLoader"))
                 except:
@@ -150,14 +191,14 @@ class Updater:
                             self.context.loop.create_task(tab.evaluate_js(f"window.DeckyUpdater.updateProgress({new_progress})", False, False, False))
                             progress = new_progress
 
-                with open(path.join(getcwd(), ".loader.version"), "w") as out:
-                    out.write(version)
+            with open(path.join(getcwd(), ".loader.version"), "w", encoding="utf-8") as out:
+                out.write(version)
 
-                call(['chmod', '+x', path.join(getcwd(), "PluginLoader")])
-
-                logger.info("Updated loader installation.")
-                await tab.evaluate_js("window.DeckyUpdater.finish()", False, False)
-                await tab.client.close()
+            call(['chmod', '+x', path.join(getcwd(), "PluginLoader")])
+            logger.info("Updated loader installation.")
+            await tab.evaluate_js("window.DeckyUpdater.finish()", False, False)
+            await self.do_restart()
+            await tab.close_websocket()
 
     async def do_restart(self):
         call(["systemctl", "daemon-reload"])

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)
@@ -69,12 +80,13 @@ class Utilities:
 
     async def http_request(self, method="", url="", **kwargs):
         async with ClientSession() as web:
-            async with web.request(method, url, ssl=helpers.get_ssl_context(), **kwargs) as res:
-                return {
-                    "status": res.status,
-                    "headers": dict(res.headers),
-                    "body": await res.text()
-                }
+            res = await web.request(method, url, ssl=helpers.get_ssl_context(), **kwargs)
+            text = await res.text()
+        return {
+            "status": res.status,
+            "headers": dict(res.headers),
+            "body": text
+        }
 
     async def ping(self, **kwargs):
         return "pong"
@@ -194,3 +206,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:
+                    res = await web.request("GET", "http://" + ip + ":8097", ssl=helpers.get_ssl_context())
+                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("SteamClient.User.StartRestart();", False, True, False)
+        self.logger.info("React DevTools disabled")

dist/install_nightly.sh

@@ -1,50 +0,0 @@
-#!/bin/sh
-
-[ "$UID" -eq 0 ] || exec sudo "$0" "$@"
-
-echo "Installing Steam Deck Plugin Loader nightly..."
-
-USER_DIR="$(getent passwd $SUDO_USER | cut -d: -f6)"
-HOMEBREW_FOLDER="${USER_DIR}/homebrew"
-
-# Create folder structure
-rm -rf ${HOMEBREW_FOLDER}/services
-sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/services"
-sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/plugins"
-
-# Download latest nightly build and install it
-rm -rf /tmp/plugin_loader
-mkdir -p /tmp/plugin_loader
-curl -L https://nightly.link/SteamDeckHomebrew/PluginLoader/workflows/build/main/Plugin%20Loader.zip --output /tmp/plugin_loader/PluginLoader.zip
-unzip /tmp/plugin_loader/PluginLoader.zip -d /tmp/plugin_loader
-cp /tmp/plugin_loader/PluginLoader ${HOMEBREW_FOLDER}/services/PluginLoader
-rm -rf /tmp/plugin_loader
-chmod +x ${HOMEBREW_FOLDER}/services/PluginLoader
-
-systemctl --user stop plugin_loader 2> /dev/null
-systemctl --user disable plugin_loader 2> /dev/null
-rm -f ${USER_DIR}/.config/systemd/user/plugin_loader.service
-
-systemctl stop plugin_loader 2> /dev/null
-systemctl disable plugin_loader 2> /dev/null
-rm -f /etc/systemd/system/plugin_loader.service
-
-cat > /etc/systemd/system/plugin_loader.service <<- EOM
-[Unit]
-Description=SteamDeck Plugin Loader
-
-[Service]
-Type=simple
-User=root
-Restart=always
-
-ExecStart=${HOMEBREW_FOLDER}/services/PluginLoader
-WorkingDirectory=${HOMEBREW_FOLDER}/services
-Environment=PLUGIN_PATH=${HOMEBREW_FOLDER}/plugins
-
-[Install]
-WantedBy=multi-user.target
-EOM
-systemctl daemon-reload
-systemctl start plugin_loader
-systemctl enable plugin_loader

dist/install_prerelease.sh

@@ -7,8 +7,8 @@ echo "Installing Steam Deck Plugin Loader pre-release..."
 USER_DIR="$(getent passwd $SUDO_USER | cut -d: -f6)"
 HOMEBREW_FOLDER="${USER_DIR}/homebrew"
 
-# # Create folder structure
-rm -rf ${HOMEBREW_FOLDER}/services
+# Create folder structure
+rm -rf "${HOMEBREW_FOLDER}/services"
 sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/services"
 sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/plugins"
 
@@ -26,21 +26,42 @@ systemctl --user disable plugin_loader 2> /dev/null
 
 systemctl stop plugin_loader 2> /dev/null
 systemctl disable plugin_loader 2> /dev/null
-rm -f /etc/systemd/system/plugin_loader.service
-cat > /etc/systemd/system/plugin_loader.service <<- EOM
+
+curl -L https://raw.githubusercontent.com/SteamDeckHomebrew/decky-loader/main/dist/plugin_loader-prerelease.service  --output ${HOMEBREW_FOLDER}/services/plugin_loader-prerelease.service
+
+cat > "${HOMEBREW_FOLDER}/services/plugin_loader-backup.service" <<- EOM
 [Unit]
 Description=SteamDeck Plugin Loader
+After=network-online.target
+Wants=network-online.target
 [Service]
 Type=simple
 User=root
 Restart=always
 ExecStart=${HOMEBREW_FOLDER}/services/PluginLoader
 WorkingDirectory=${HOMEBREW_FOLDER}/services
+KillSignal=SIGKILL
 Environment=PLUGIN_PATH=${HOMEBREW_FOLDER}/plugins
 Environment=LOG_LEVEL=DEBUG
 [Install]
 WantedBy=multi-user.target
 EOM
+
+if [[ -f "${HOMEBREW_FOLDER}/services/plugin_loader-prerelease.service" ]]; then
+    printf "Grabbed latest prerelease service.\n"
+    sed -i -e "s|\${HOMEBREW_FOLDER}|${HOMEBREW_FOLDER}|" "${HOMEBREW_FOLDER}/services/plugin_loader-prerelease.service"
+    cp -f "${HOMEBREW_FOLDER}/services/plugin_loader-prerelease.service" "/etc/systemd/system/plugin_loader.service"
+else
+    printf "Could not curl latest prerelease systemd service, using built-in service as a backup!\n"
+    rm -f "/etc/systemd/system/plugin_loader.service"
+    cp "${HOMEBREW_FOLDER}/services/plugin_loader-backup.service" "/etc/systemd/system/plugin_loader.service"
+fi
+
+mkdir -p ${HOMEBREW_FOLDER}/services/.systemd
+cp ${HOMEBREW_FOLDER}/services/plugin_loader-prerelease.service ${HOMEBREW_FOLDER}/services/.systemd/plugin_loader-prerelease.service
+cp ${HOMEBREW_FOLDER}/services/plugin_loader-backup.service ${HOMEBREW_FOLDER}/services/.systemd/plugin_loader-backup.service
+rm ${HOMEBREW_FOLDER}/services/plugin_loader-backup.service ${HOMEBREW_FOLDER}/services/plugin_loader-prerelease.service
+
 systemctl daemon-reload
 systemctl start plugin_loader
 systemctl enable plugin_loader

dist/install_release.sh

@@ -26,20 +26,42 @@ systemctl --user disable plugin_loader 2> /dev/null
 
 systemctl stop plugin_loader 2> /dev/null
 systemctl disable plugin_loader 2> /dev/null
-rm -f "/etc/systemd/system/plugin_loader.service"
-cat > "/etc/systemd/system/plugin_loader.service" <<- EOM
+
+curl -L https://raw.githubusercontent.com/SteamDeckHomebrew/decky-loader/main/dist/plugin_loader-release.service  --output ${HOMEBREW_FOLDER}/services/plugin_loader-release.service
+
+cat > "${HOMEBREW_FOLDER}/services/plugin_loader-backup.service" <<- EOM
 [Unit]
 Description=SteamDeck Plugin Loader
+After=network-online.target
+Wants=network-online.target
 [Service]
 Type=simple
 User=root
 Restart=always
 ExecStart=${HOMEBREW_FOLDER}/services/PluginLoader
 WorkingDirectory=${HOMEBREW_FOLDER}/services
+KillSignal=SIGKILL
 Environment=PLUGIN_PATH=${HOMEBREW_FOLDER}/plugins
+Environment=LOG_LEVEL=INFO
 [Install]
 WantedBy=multi-user.target
 EOM
+
+if [[ -f "${HOMEBREW_FOLDER}/services/plugin_loader-release.service" ]]; then
+    printf "Grabbed latest release service.\n"
+    sed -i -e "s|\${HOMEBREW_FOLDER}|${HOMEBREW_FOLDER}|" "${HOMEBREW_FOLDER}/services/plugin_loader-release.service"
+    cp -f "${HOMEBREW_FOLDER}/services/plugin_loader-release.service" "/etc/systemd/system/plugin_loader.service"
+else
+    printf "Could not curl latest release systemd service, using built-in service as a backup!\n"
+    rm -f "/etc/systemd/system/plugin_loader.service"
+    cp "${HOMEBREW_FOLDER}/services/plugin_loader-backup.service" "/etc/systemd/system/plugin_loader.service"
+fi
+
+mkdir -p ${HOMEBREW_FOLDER}/services/.systemd
+cp ${HOMEBREW_FOLDER}/services/plugin_loader-release.service ${HOMEBREW_FOLDER}/services/.systemd/plugin_loader-release.service
+cp ${HOMEBREW_FOLDER}/services/plugin_loader-backup.service ${HOMEBREW_FOLDER}/services/.systemd/plugin_loader-backup.service
+rm ${HOMEBREW_FOLDER}/services/plugin_loader-backup.service ${HOMEBREW_FOLDER}/services/plugin_loader-release.service
+
 systemctl daemon-reload
 systemctl start plugin_loader
 systemctl enable plugin_loader

dist/plugin_loader-prerelease.service

@@ -0,0 +1,15 @@
+[Unit]
+Description=SteamDeck Plugin Loader
+After=network-online.target
+Wants=network-online.target
+[Service]
+Type=simple
+User=root
+Restart=always
+ExecStart=${HOMEBREW_FOLDER}/services/PluginLoader
+WorkingDirectory=${HOMEBREW_FOLDER}/services
+KillSignal=SIGKILL
+Environment=PLUGIN_PATH=${HOMEBREW_FOLDER}/plugins
+Environment=LOG_LEVEL=DEBUG
+[Install]
+WantedBy=multi-user.target

dist/plugin_loader-release.service

@@ -0,0 +1,15 @@
+[Unit]
+Description=SteamDeck Plugin Loader
+After=network-online.target
+Wants=network-online.target
+[Service]
+Type=simple
+User=root
+Restart=always
+ExecStart=${HOMEBREW_FOLDER}/services/PluginLoader
+WorkingDirectory=${HOMEBREW_FOLDER}/services
+KillSignal=SIGKILL
+Environment=PLUGIN_PATH=${HOMEBREW_FOLDER}/plugins
+Environment=LOG_LEVEL=INFO
+[Install]
+WantedBy=multi-user.target

frontend/package.json

@@ -41,7 +41,7 @@
     }
   },
   "dependencies": {
-    "decky-frontend-lib": "^3.1.3",
+    "decky-frontend-lib": "^3.18.4",
     "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.18.4
   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.18.4
   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,8 @@ packages:
     dependencies:
       ms: 2.1.2
 
-  /decky-frontend-lib/3.1.3:
-    resolution: {integrity: sha512-X6DGi90VdXnyoQi8Q4jEYhvBiNQualMNwXWKwgFitdor2ktNj5xp3a4uIi1ijbnS/vdW2AGKjraTfOMXtHUNAg==}
-    dependencies:
-      minimist: 1.2.6
+  /decky-frontend-lib/3.18.4:
+    resolution: {integrity: sha512-i3TAe3RJtT1TK0rJgW9Ek5jxMWZRCYLDvqHDylGVieUvuyI7c8X+cogz30pP4cqeGOaA1d/MxBEbhlpD3JhVvg==}
     dev: false
 
   /decode-named-character-reference/1.0.2:
@@ -1944,10 +1942,6 @@ packages:
       brace-expansion: 1.1.11
     dev: true
 
-  /minimist/1.2.6:
-    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
-    dev: false
-
   /mri/1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}

frontend/rollup.config.js

@@ -1,25 +1,27 @@
 import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
-import externalGlobals from "rollup-plugin-external-globals";
-import del from 'rollup-plugin-delete'
 import replace from '@rollup/plugin-replace';
 import typescript from '@rollup/plugin-typescript';
 import { defineConfig } from 'rollup';
+import del from 'rollup-plugin-delete';
+import externalGlobals from 'rollup-plugin-external-globals';
+
+const hiddenWarnings = ['THIS_IS_UNDEFINED', 'EVAL'];
 
 export default defineConfig({
   input: 'src/index.tsx',
   plugins: [
-    del({ targets: "../backend/static/*", force: true }),
+    del({ targets: '../backend/static/*', force: true }),
     commonjs(),
     nodeResolve(),
     externalGlobals({
       react: 'SP_REACT',
       'react-dom': 'SP_REACTDOM',
       // hack to shut up react-markdown
-      'process': '{cwd: () => {}}',
-      'path': '{dirname: () => {}, join: () => {}, basename: () => {}, extname: () => {}}',
-      'url': '{fileURLToPath: (f) => f}'
+      process: '{cwd: () => {}}',
+      path: '{dirname: () => {}, join: () => {}, basename: () => {}, extname: () => {}}',
+      url: '{fileURLToPath: (f) => f}',
     }),
     typescript(),
     json(),
@@ -33,7 +35,11 @@ export default defineConfig({
     dir: '../backend/static',
     format: 'esm',
     chunkFileNames: (chunkInfo) => {
-      return 'chunk-[hash].js'
-    }
-  }
+      return 'chunk-[hash].js';
+    },
+  },
+  onwarn: function (message, handleWarning) {
+    if (hiddenWarnings.some((warning) => message.code === warning)) return;
+    handleWarning(message);
+  },
 });

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(name: string, component: FC) {
+    this._components.set(name, component);
+    this.notifyUpdate();
+  }
+
+  removeComponent(name: string) {
+    this._components.delete(name);
+    this.notifyUpdate();
+  }
+
+  private notifyUpdate() {
+    this.eventBus.dispatchEvent(new Event('update'));
+  }
+}
+
+interface DeckyGlobalComponentsContext extends PublicDeckyGlobalComponentsState {
+  addComponent(name: string, component: FC): void;
+  removeComponent(name: 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/DeckyMenuState.tsx

@@ -0,0 +1,147 @@
+import { CustomMainMenuItem, ItemPatch, OverlayPatch } from 'decky-frontend-lib';
+import { FC, ReactNode, createContext, useContext, useEffect, useState } from 'react';
+
+interface PublicDeckyMenuState {
+  items: Set<CustomMainMenuItem>;
+  itemPatches: Map<string, Set<ItemPatch>>;
+  overlayPatches: Set<OverlayPatch>;
+  overlayComponents: Set<ReactNode>;
+}
+
+export class DeckyMenuState {
+  private _items = new Set<CustomMainMenuItem>();
+  private _itemPatches = new Map<string, Set<ItemPatch>>();
+  private _overlayPatches = new Set<OverlayPatch>();
+  private _overlayComponents = new Set<ReactNode>();
+
+  public eventBus = new EventTarget();
+
+  publicState(): PublicDeckyMenuState {
+    return {
+      items: this._items,
+      itemPatches: this._itemPatches,
+      overlayPatches: this._overlayPatches,
+      overlayComponents: this._overlayComponents,
+    };
+  }
+
+  addItem(item: CustomMainMenuItem) {
+    this._items.add(item);
+    this.notifyUpdate();
+    return item;
+  }
+
+  addPatch(path: string, patch: ItemPatch) {
+    let patchList = this._itemPatches.get(path);
+    if (!patchList) {
+      patchList = new Set();
+      this._itemPatches.set(path, patchList);
+    }
+    patchList.add(patch);
+    this.notifyUpdate();
+    return patch;
+  }
+
+  addOverlayPatch(patch: OverlayPatch) {
+    this._overlayPatches.add(patch);
+    this.notifyUpdate();
+    return patch;
+  }
+
+  addOverlayComponent(component: ReactNode) {
+    this._overlayComponents.add(component);
+    this.notifyUpdate();
+    return component;
+  }
+
+  removePatch(path: string, patch: ItemPatch) {
+    const patchList = this._itemPatches.get(path);
+    patchList?.delete(patch);
+    if (patchList?.size == 0) {
+      this._itemPatches.delete(path);
+    }
+    this.notifyUpdate();
+  }
+
+  removeItem(item: CustomMainMenuItem) {
+    this._items.delete(item);
+    this.notifyUpdate();
+    return item;
+  }
+
+  removeOverlayPatch(patch: OverlayPatch) {
+    this._overlayPatches.delete(patch);
+    this.notifyUpdate();
+  }
+
+  removeOverlayComponent(component: ReactNode) {
+    this._overlayComponents.delete(component);
+    this.notifyUpdate();
+  }
+
+  private notifyUpdate() {
+    this.eventBus.dispatchEvent(new Event('update'));
+  }
+}
+
+interface DeckyMenuStateContext extends PublicDeckyMenuState {
+  addItem: DeckyMenuState['addItem'];
+  addPatch: DeckyMenuState['addPatch'];
+  addOverlayPatch: DeckyMenuState['addOverlayPatch'];
+  addOverlayComponent: DeckyMenuState['addOverlayComponent'];
+  removePatch: DeckyMenuState['removePatch'];
+  removeOverlayPatch: DeckyMenuState['removeOverlayPatch'];
+  removeOverlayComponent: DeckyMenuState['removeOverlayComponent'];
+  removeItem: DeckyMenuState['removeItem'];
+}
+
+const DeckyMenuStateContext = createContext<DeckyMenuStateContext>(null as any);
+
+export const useDeckyMenuState = () => useContext(DeckyMenuStateContext);
+
+interface Props {
+  deckyMenuState: DeckyMenuState;
+}
+
+export const DeckyMenuStateContextProvider: FC<Props> = ({ children, deckyMenuState }) => {
+  const [publicDeckyMenuState, setPublicDeckyMenuState] = useState<PublicDeckyMenuState>({
+    ...deckyMenuState.publicState(),
+  });
+
+  useEffect(() => {
+    function onUpdate() {
+      setPublicDeckyMenuState({ ...deckyMenuState.publicState() });
+    }
+
+    deckyMenuState.eventBus.addEventListener('update', onUpdate);
+
+    return () => deckyMenuState.eventBus.removeEventListener('update', onUpdate);
+  }, []);
+
+  const addItem = deckyMenuState.addItem.bind(deckyMenuState);
+  const addPatch = deckyMenuState.addPatch.bind(deckyMenuState);
+  const addOverlayPatch = deckyMenuState.addOverlayPatch.bind(deckyMenuState);
+  const addOverlayComponent = deckyMenuState.addOverlayComponent.bind(deckyMenuState);
+  const removePatch = deckyMenuState.removePatch.bind(deckyMenuState);
+  const removeOverlayPatch = deckyMenuState.removeOverlayPatch.bind(deckyMenuState);
+  const removeOverlayComponent = deckyMenuState.removeOverlayComponent.bind(deckyMenuState);
+  const removeItem = deckyMenuState.removeItem.bind(deckyMenuState);
+
+  return (
+    <DeckyMenuStateContext.Provider
+      value={{
+        ...publicDeckyMenuState,
+        addItem,
+        addPatch,
+        addOverlayPatch,
+        addOverlayComponent,
+        removePatch,
+        removeOverlayPatch,
+        removeOverlayComponent,
+        removeItem,
+      }}
+    >
+      {children}
+    </DeckyMenuStateContext.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,21 @@
-import { FC, createContext, useContext } from 'react';
+import { FC, createContext, useContext, useState } from 'react';
 
 const QuickAccessVisibleState = createContext<boolean>(true);
 
 export const useQuickAccessVisible = () => useContext(QuickAccessVisibleState);
 
-interface Props {
-  visible: boolean;
-}
-
-export const QuickAccessVisibleStateProvider: FC<Props> = ({ children, visible }) => {
+export const QuickAccessVisibleStateProvider: FC<{ initial: boolean; setter: ((val: boolean) => {}[]) | never[] }> = ({
+  children,
+  initial,
+  setter,
+}) => {
+  const [visible, setVisible] = useState<boolean>(initial);
+  const [prev, setPrev] = useState<boolean>(initial);
+  // hack to use an array as a "pointer" to pass the setter up the tree
+  setter[0] = setVisible;
+  if (initial != prev) {
+    setPrev(initial);
+    setVisible(initial);
+  }
   return <QuickAccessVisibleState.Provider value={visible}>{children}</QuickAccessVisibleState.Provider>;
 };

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) {
@@ -31,21 +28,17 @@ 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)}
+      style={{ '--toast-duration': `${toast.duration}ms` } as React.CSSProperties}
+      onClick={toast.onClick}
+      className={joinClassNames(templateClasses.ShortTemplate, toast.className || '')}
     >
-      <div
-        onClick={toast.data.onClick}
-        className={joinClassNames(templateClasses.ShortTemplate, toast.data.className || '')}
-      >
-        {toast.data.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.data.logo}</div>}
-        <div className={joinClassNames(templateClasses.Content, toast.data.contentClassName || '')}>
-          <div className={templateClasses.Header}>
-            {toast.data.icon && <div className={templateClasses.Icon}>{toast.data.icon}</div>}
-            <div className={templateClasses.Title}>{toast.data.title}</div>
-          </div>
-          <div className={templateClasses.Body}>{toast.data.body}</div>
+      {toast.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.logo}</div>}
+      <div className={joinClassNames(templateClasses.Content, toast.contentClassName || '')}>
+        <div className={templateClasses.Header}>
+          {toast.icon && <div className={templateClasses.Icon}>{toast.icon}</div>}
+          <div className={templateClasses.Title}>{toast.title}</div>
         </div>
+        <div className={templateClasses.Body}>{toast.body}</div>
       </div>
     </div>
   );

frontend/src/components/modals/PluginInstallModal.tsx

@@ -1,4 +1,4 @@
-import { ConfirmModal, QuickAccessTab, Router, Spinner, staticClasses } from 'decky-frontend-lib';
+import { ConfirmModal, Navigation, QuickAccessTab, Spinner, staticClasses } from 'decky-frontend-lib';
 import { FC, useState } from 'react';
 
 interface PluginInstallModalProps {
@@ -20,7 +20,7 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, ha
       onOK={async () => {
         setLoading(true);
         await onOK();
-        setTimeout(() => Router.OpenQuickAccessMenu(QuickAccessTab.Decky), 250);
+        setTimeout(() => Navigation.OpenQuickAccessMenu(QuickAccessTab.Decky), 250);
         setTimeout(() => window.DeckyPluginLoader.checkPluginUpdates(), 1000);
       }}
       onCancel={async () => {

frontend/src/components/modals/filepicker/patches/library.ts

@@ -1,4 +1,8 @@
-import { Patch, findModuleChild, replacePatch } from 'decky-frontend-lib';
+import { Patch, findModuleChild, replacePatch, sleep } from 'decky-frontend-lib';
+
+import Logger from '../../../../logger';
+
+const logger = new Logger('LibraryPatch');
 
 declare global {
   interface Window {
@@ -10,36 +14,44 @@ declare global {
 let patch: Patch;
 
 function rePatch() {
-  // If you patch anything on SteamClient within the first few seconds of the client having loaded it will get redefined for some reason, so repatch any of these changes that occur within the first 20s of the last patch
+  // If you patch anything on SteamClient within the first few seconds of the client having loaded it will get redefined for some reason, so repatch any of these changes that occur with History.listen or an interval
   patch = replacePatch(window.SteamClient.Apps, 'PromptToChangeShortcut', async ([appid]: number[]) => {
     try {
       const details = window.appDetailsStore.GetAppDetails(appid);
-      console.log(details);
+      logger.debug('game details', details);
       // strShortcutStartDir
       const file = await window.DeckyPluginLoader.openFilePicker(details.strShortcutStartDir.replaceAll('"', ''));
-      console.log('user selected', file);
+      logger.debug('user selected', file);
       window.SteamClient.Apps.SetShortcutExe(appid, JSON.stringify(file.path));
       const pathArr = file.path.split('/');
       pathArr.pop();
       const folder = pathArr.join('/');
       window.SteamClient.Apps.SetShortcutStartDir(appid, JSON.stringify(folder));
     } catch (e) {
-      console.error(e);
+      logger.error(e);
     }
   });
 }
 
-// TODO type and add to frontend-lib
-const History = findModuleChild((m) => {
-  if (typeof m !== 'object') return undefined;
-  for (let prop in m) {
-    if (m[prop]?.m_history) return m[prop].m_history;
-  }
-});
-
 export default async function libraryPatch() {
   try {
     rePatch();
+    // TODO type and add to frontend-lib
+    let History: any;
+
+    while (!History) {
+      History = findModuleChild((m) => {
+        if (typeof m !== 'object') return undefined;
+        for (let prop in m) {
+          if (m[prop]?.m_history) return m[prop].m_history;
+        }
+      });
+      if (!History) {
+        logger.debug('Waiting 5s for history to become available.');
+        await sleep(5000);
+      }
+    }
+
     const unlisten = History.listen(() => {
       if (window.SteamClient.Apps.PromptToChangeShortcut !== patch.patchedFunction) {
         rePatch();
@@ -47,11 +59,11 @@ export default async function libraryPatch() {
     });
 
     return () => {
-      patch.unpatch();
       unlisten();
+      patch.unpatch();
     };
   } catch (e) {
-    console.error('Error patching library file picker', e);
+    logger.error('Error patching library file picker', e);
   }
   return () => {};
 }

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/BranchSelect.tsx

@@ -10,7 +10,7 @@ const logger = new Logger('BranchSelect');
 enum UpdateBranch {
   Stable,
   Prerelease,
-  // Nightly,
+  // Testing,
 }
 
 const BranchSelect: FunctionComponent<{}> = () => {

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

@@ -0,0 +1,52 @@
+import { Dropdown, Field, TextField } from 'decky-frontend-lib';
+import { FunctionComponent } from 'react';
+import { FaShapes } from 'react-icons/fa';
+
+import Logger from '../../../../logger';
+import { Store } from '../../../../store';
+import { useSetting } from '../../../../utils/hooks/useSetting';
+
+const logger = new Logger('StoreSelect');
+
+const StoreSelect: FunctionComponent<{}> = () => {
+  const [selectedStore, setSelectedStore] = useSetting<Store>('store', Store.Default);
+  const [selectedStoreURL, setSelectedStoreURL] = useSetting<string | null>('store-url', null);
+
+  // Returns numerical values from 0 to 2 (with current branch setup as of 8/28/22)
+  // 0 being Default, 1 being Testing and 2 being Custom
+  return (
+    <>
+      <Field label="Store Channel">
+        <Dropdown
+          rgOptions={Object.values(Store)
+            .filter((store) => typeof store == 'string')
+            .map((store) => ({
+              label: store,
+              data: Store[store],
+            }))}
+          selectedOption={selectedStore}
+          onChange={async (newVal) => {
+            await setSelectedStore(newVal.data);
+            logger.log('switching stores!');
+          }}
+        />
+      </Field>
+      {selectedStore == Store.Custom && (
+        <Field
+          label="Custom Store"
+          indentLevel={1}
+          description={
+            <TextField
+              label={'URL'}
+              value={selectedStoreURL || undefined}
+              onChange={(e) => setSelectedStoreURL(e?.target.value || null)}
+            />
+          }
+          icon={<FaShapes style={{ display: 'block' }} />}
+        ></Field>
+      )}
+    </>
+  );
+};
+
+export default StoreSelect;

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,40 @@
-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 StoreSelect from './StoreSelect';
 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 />
+      <StoreSelect />
       <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

@@ -2,8 +2,8 @@ import {
   DialogButton,
   Dropdown,
   Focusable,
+  Navigation,
   QuickAccessTab,
-  Router,
   SingleDropdownOption,
   SuspensefulImage,
   joinClassNames,
@@ -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 }) => {
@@ -45,8 +38,8 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
         }}
         onCancel={(_: CustomEvent) => {
           if (containerRef.current!.querySelectorAll('* :focus').length === 0) {
-            Router.NavigateBackOrOpenMenu();
-            setTimeout(() => Router.OpenQuickAccessMenu(QuickAccessTab.Decky), 1000);
+            Navigation.NavigateBack();
+            setTimeout(() => Navigation.OpenQuickAccessMenu(QuickAccessTab.Decky), 1000);
           } else {
             containerRef.current!.focus();
           }
@@ -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,105 @@
+import {
+  Navigation,
+  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 async function setShowValveInternal(show: boolean) {
+  let settingsMod: any;
+  while (!settingsMod) {
+    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 (!settingsMod) {
+      logger.debug('[ValveInternal] waiting for settingsMod');
+      await sleep(1000);
+    }
+  }
+
+  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,
+    Navigation,
+    Router,
+    ReactRouter,
+    ReactUtils: {
+      fakeRenderComponent,
+      findInReactTree,
+      findInTree,
+    },
+    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/menu-hook.tsx

@@ -0,0 +1,235 @@
+import {
+  CustomMainMenuItem,
+  ItemPatch,
+  MainMenuItem,
+  OverlayPatch,
+  afterPatch,
+  findInReactTree,
+  sleep,
+} from 'decky-frontend-lib';
+import { FC } from 'react';
+import { ReactNode, cloneElement, createElement } from 'react';
+
+import { DeckyMenuState, DeckyMenuStateContextProvider, useDeckyMenuState } from './components/DeckyMenuState';
+import Logger from './logger';
+
+declare global {
+  interface Window {
+    __MENU_HOOK_INSTANCE: any;
+  }
+}
+
+class MenuHook extends Logger {
+  private menuRenderer?: any;
+  private originalRenderer?: any;
+  private menuState: DeckyMenuState = new DeckyMenuState();
+
+  constructor() {
+    super('MenuHook');
+
+    this.log('Initialized');
+    window.__MENU_HOOK_INSTANCE?.deinit?.();
+    window.__MENU_HOOK_INSTANCE = this;
+  }
+
+  init() {
+    const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
+    let outerMenuRoot: any;
+    const findMenuRoot = (currentNode: any, iters: number): any => {
+      if (iters >= 60) {
+        // currently 54
+        return null;
+      }
+      if (currentNode?.memoizedProps?.navID == 'MainNavMenuContainer') {
+        this.log(`Menu root was found in ${iters} recursion cycles`);
+        return currentNode;
+      }
+      if (currentNode.child) {
+        let node = findMenuRoot(currentNode.child, iters + 1);
+        if (node !== null) return node;
+      }
+      if (currentNode.sibling) {
+        let node = findMenuRoot(currentNode.sibling, iters + 1);
+        if (node !== null) return node;
+      }
+      return null;
+    };
+
+    (async () => {
+      outerMenuRoot = findMenuRoot(tree, 0);
+      while (!outerMenuRoot) {
+        this.error(
+          'Failed to find Menu root node, reattempting in 5 seconds. A developer may need to increase the recursion limit.',
+        );
+        await sleep(5000);
+        outerMenuRoot = findMenuRoot(tree, 0);
+      }
+      this.log('found outermenuroot', outerMenuRoot);
+      const menuRenderer = outerMenuRoot.return;
+      this.menuRenderer = menuRenderer;
+      this.originalRenderer = menuRenderer.type;
+      let toReplace = new Map<string, ReactNode>();
+      let alreadyPatched = new Map<string, { total: number; node: ReactNode }>();
+
+      let patchedInnerMenu: any;
+      let overlayComponentManager: any;
+
+      const DeckyOverlayComponentManager = () => {
+        const { overlayComponents } = useDeckyMenuState();
+
+        return <>{overlayComponents.values()}</>;
+      };
+
+      const DeckyInnerMenuWrapper = (props: { innerProps: any }) => {
+        const { overlayPatches } = useDeckyMenuState();
+
+        const rendererRet = this.originalRenderer(props.innerProps);
+
+        // Find the first array of children, this contains [mainmenu, overlay]
+        const childArray = findInReactTree(rendererRet, (x) => x?.[0]?.type);
+
+        // Insert the overlay components manager
+        if (!overlayComponentManager) {
+          overlayComponentManager = <DeckyOverlayComponentManager />;
+        }
+
+        childArray.push(overlayComponentManager);
+
+        // This must be cached in patchedInnerMenu to prevent re-renders
+        if (patchedInnerMenu) {
+          childArray[0].type = patchedInnerMenu;
+        } else {
+          afterPatch(childArray[0], 'type', (_, ret) => {
+            const { itemPatches, items } = useDeckyMenuState();
+
+            const itemList = ret.props.children;
+
+            // Add custom menu items
+            if (items.size > 0) {
+              const button = findInReactTree(ret.props.children, (x) =>
+                x?.type?.toString()?.includes('exactRouteMatch:'),
+              );
+
+              const MenuItemComponent: FC<MainMenuItem> = button.type;
+
+              items.forEach((item) => {
+                let realIndex = 0; // there are some non-item things in the array
+                let count = 0;
+                itemList.forEach((i: any) => {
+                  if (count == item.index) return;
+                  if (i?.type == MenuItemComponent) count++;
+                  realIndex++;
+                });
+                itemList.splice(realIndex, 0, createElement(MenuItemComponent, item));
+              });
+            }
+
+            // Apply and revert patches
+            itemList.forEach((item: { props: MainMenuItem }, index: number) => {
+              if (!item?.props?.route) return;
+              const replaced = toReplace.get(item?.props?.route as string);
+              if (replaced) {
+                itemList[index] = replaced;
+                toReplace.delete(item?.props.route as string);
+              }
+              if (item?.props?.route && (itemPatches.has(item.props.route as string) || itemPatches.has('*'))) {
+                if (
+                  item?.props?.route && 
+                  alreadyPatched.has(item.props.route) &&
+                  alreadyPatched.get(item.props.route)?.total ==
+                    (itemPatches.get(item.props.route)?.size || 0) + (itemPatches.get('*')?.size || 0)
+                ) {
+                  const patched = alreadyPatched.get(item.props.route);
+                  this.debug('found already patched', patched);
+                  itemList[index] = patched?.node;
+                  return;
+                }
+                toReplace.set(item?.props?.route as string, itemList[index]);
+                itemPatches.get(item.props.route as string)?.forEach((patch) => {
+                  const oType = itemList[index].type;
+                  itemList[index] = patch({
+                    ...cloneElement(itemList[index]),
+                    type: (props: any) => createElement(oType, props),
+                  });
+                });
+                itemPatches.get('*')?.forEach((patch) => {
+                  const oType = itemList[index].type;
+                  itemList[index] = patch({
+                    ...cloneElement(itemList[index]),
+                    type: (props: any) => createElement(oType, props),
+                  });
+                });
+                alreadyPatched.set(item.props.route, {
+                  total: (itemPatches.get(item.props.route)?.size || 0) + (itemPatches.get('*')?.size || 0),
+                  node: itemList[index],
+                });
+              }
+            });
+
+            return ret;
+          });
+          patchedInnerMenu = childArray[0].type;
+        }
+
+        // Apply patches to the overlay
+        if (childArray[1]) {
+          overlayPatches.forEach((patch) => (childArray[1] = patch(childArray[1])));
+        }
+
+        return rendererRet;
+      };
+
+      const DeckyOuterMenuWrapper = (props: any) => {
+        return (
+          <DeckyMenuStateContextProvider deckyMenuState={this.menuState}>
+            <DeckyInnerMenuWrapper innerProps={props} />
+          </DeckyMenuStateContextProvider>
+        );
+      };
+      menuRenderer.type = DeckyOuterMenuWrapper;
+      if (menuRenderer.alternate) {
+        menuRenderer.alternate.type = menuRenderer.type;
+      }
+      this.log('Finished initial injection');
+    })();
+  }
+
+  deinit() {
+    this.menuRenderer.type = this.originalRenderer;
+    this.menuRenderer.alternate.type = this.menuRenderer.type;
+  }
+
+  addItem(item: CustomMainMenuItem) {
+    return this.menuState.addItem(item);
+  }
+
+  addPatch(path: string, patch: ItemPatch) {
+    return this.menuState.addPatch(path, patch);
+  }
+
+  addOverlayPatch(patch: OverlayPatch) {
+    return this.menuState.addOverlayPatch(patch);
+  }
+
+  addOverlayComponent(component: ReactNode) {
+    return this.menuState.addOverlayComponent(component);
+  }
+
+  removePatch(path: string, patch: ItemPatch) {
+    return this.menuState.removePatch(path, patch);
+  }
+
+  removeItem(item: CustomMainMenuItem) {
+    return this.menuState.removeItem(item);
+  }
+
+  removeOverlayPatch(patch: OverlayPatch) {
+    return this.menuState.removeOverlayPatch(patch);
+  }
+
+  removeOverlayComponent(component: ReactNode) {
+    return this.menuState.removeOverlayComponent(component);
+  }
+}
+
+export default MenuHook;

frontend/src/plugin-loader.tsx

@@ -1,15 +1,6 @@
-import {
-  ConfirmModal,
-  ModalRoot,
-  Patch,
-  QuickAccessTab,
-  Router,
-  showModal,
-  sleep,
-  staticClasses,
-} from 'decky-frontend-lib';
-import { lazy } from 'react';
-import { FaPlug } from 'react-icons/fa';
+import { ConfirmModal, ModalRoot, QuickAccessTab, Router, showModal, sleep, staticClasses } from 'decky-frontend-lib';
+import { FC, lazy } from 'react';
+import { FaCog, FaExclamationCircle, FaPlug } from 'react-icons/fa';
 
 import { DeckyState, DeckyStateContextProvider, useDeckyState } from './components/DeckyState';
 import LegacyPlugin from './components/LegacyPlugin';
@@ -19,38 +10,39 @@ import NotificationBadge from './components/NotificationBadge';
 import PluginView from './components/PluginView';
 import WithSuspense from './components/WithSuspense';
 import Logger from './logger';
+import MenuHook from './menu-hook';
 import { Plugin } from './plugin';
 import RouterHook from './router-hook';
+import { deinitSteamFixes, initSteamFixes } from './steamfixes';
 import { checkForUpdates } from './store';
 import TabsHook from './tabs-hook';
+import OldTabsHook from './tabs-hook.old';
 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'));
 
 const FilePicker = lazy(() => import('./components/modals/filepicker'));
 
-declare global {
-  interface Window {}
-}
-
 class PluginLoader extends Logger {
   private plugins: Plugin[] = [];
-  private tabsHook: TabsHook = new TabsHook();
+  private tabsHook: TabsHook | OldTabsHook = document.title == 'SP' ? new OldTabsHook() : new TabsHook();
+  private menuHook: MenuHook = new MenuHook();
   // private windowHook: WindowHook = new WindowHook();
   private routerHook: RouterHook = new RouterHook();
-  private toaster: Toaster = new Toaster();
+  public toaster: Toaster = new Toaster();
   private deckyState: DeckyState = new DeckyState();
 
   private reloadLock: boolean = false;
   // stores a list of plugin names which requested to be reloaded
   private pluginReloadQueue: { name: string; version?: string }[] = [];
 
-  private focusWorkaroundPatch?: Patch;
-
   constructor() {
     super(PluginLoader.name);
+    this.tabsHook.init();
+    this.menuHook.init();
     this.log('Initialized');
 
     const TabBadge = () => {
@@ -89,6 +81,8 @@ class PluginLoader extends Logger {
       );
     });
 
+    initSteamFixes();
+
     initFilepickerPatches();
 
     this.updateVersion();
@@ -172,11 +166,17 @@ 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');
+    deinitSteamFixes();
     deinitFilepickerPatches();
-    this.focusWorkaroundPatch?.unpatch();
   }
 
   public unloadPlugin(name: string) {
@@ -226,13 +226,36 @@ 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);
+        const TheError: FC<{}> = () => (
+          <>
+            Error:{' '}
+            <pre>
+              <code>{e instanceof Error ? e.stack : JSON.stringify(e)}</code>
+            </pre>
+            <>
+              Please go to <FaCog style={{ display: 'inline' }} /> in the Decky menu if you need to uninstall this
+              plugin.
+            </>
+          </>
+        );
+        this.plugins.push({
+          name: name,
+          version: version,
+          content: <TheError />,
+          icon: <FaExclamationCircle />,
+        });
+        this.toaster.toast({ title: 'Error loading ' + name, body: '' + e, icon: <FaExclamationCircle /> });
+      }
     } else throw new Error(`${name} frontend_bundle not OK`);
   }
 
@@ -290,6 +313,7 @@ class PluginLoader extends Logger {
 
   createPluginAPI(pluginName: string) {
     return {
+      menuHook: this.menuHook,
       routerHook: this.routerHook,
       toaster: this.toaster,
       callServerMethod: this.callServerMethod,

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,42 @@ 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}</>;
+    };
+
+    let globalComponents: any;
+
     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 +145,18 @@ 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;
+
+          if (!globalComponents) {
+            globalComponents = (
+              <DeckyGlobalComponentsStateContextProvider deckyGlobalComponentsState={this.globalComponentsState}>
+                <DeckyGlobalComponentsWrapper />
+              </DeckyGlobalComponentsStateContextProvider>
+            );
+          }
+
+          ret.props.children.props.children.push(globalComponents);
+
+          ret.props.children.props.children[idx].props.children[0].type = this.memoizedRouter;
         }
       }
       return ret;
@@ -126,6 +171,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/steamfixes/README.md

@@ -0,0 +1,13 @@
+## What's this?
+
+`steamfixes` contains various fixes and workaround for things Valve has broken that cause Decky issues.
+
+## Current fixes:
+
+- StartRestart() -> StartShutdown(false) override:
+
+  StartRestart() breaks CEF debugging, StartShutdown(false) doesn't. We can safely replace StartRestart() with StartShutdown(false) as gamescope-session will automatically restart the steam client anyway if it shuts down, bypassing the broken restart codepath. Added 12/29/2022
+
+- ExecuteSteamURL UI reload fix:
+
+  Starting sometime in November 2022, Valve broke reloading the Steam UI pages via location.reload, as it won't properly start the UI. We can manually trigger UI startup if we detect no active input contexts by calling `SteamClient.URL.ExecuteSteamURL("steam://open/settings/")` Added 12/29/2022

frontend/src/steamfixes/index.ts

@@ -0,0 +1,12 @@
+import reloadFix from './reload';
+import restartFix from './restart';
+let fixes: Function[] = [];
+
+export function deinitSteamFixes() {
+  fixes.forEach((deinit) => deinit());
+}
+
+export async function initSteamFixes() {
+  fixes.push(reloadFix());
+  fixes.push(await restartFix());
+}

frontend/src/steamfixes/reload.ts

@@ -0,0 +1,14 @@
+import Logger from '../logger';
+
+const logger = new Logger('ReloadSteamFix');
+
+export default function reloadFix() {
+  // Hack to unbreak the ui when reloading it
+  if (window.FocusNavController?.m_rgAllContexts?.length == 0) {
+    SteamClient.URL.ExecuteSteamURL('steam://open/settings');
+    logger.log('Applied UI reload fix.');
+  }
+
+  // This steamfix does not need to deinit.
+  return () => {};
+}

frontend/src/steamfixes/restart.ts

@@ -0,0 +1,60 @@
+import { Patch, findModuleChild, replacePatch, sleep } from 'decky-frontend-lib';
+
+import Logger from '../logger';
+
+const logger = new Logger('RestartSteamFix');
+
+declare global {
+  interface Window {
+    SteamClient: any;
+    appDetailsStore: any;
+  }
+}
+
+let patch: Patch;
+
+function rePatch() {
+  // If you patch anything on SteamClient within the first few seconds of the client having loaded it will get redefined for some reason, so repatch any of these changes that occur with History.listen or an interval
+  patch = replacePatch(window.SteamClient.User, 'StartRestart', () => SteamClient.User.StartShutdown(false));
+}
+
+export default async function restartFix() {
+  try {
+    rePatch();
+    // TODO type and add to frontend-lib
+    let History: any;
+
+    while (!History) {
+      History = findModuleChild((m) => {
+        if (typeof m !== 'object') return undefined;
+        for (let prop in m) {
+          if (m[prop]?.m_history) return m[prop].m_history;
+        }
+      });
+      if (!History) {
+        logger.debug('Waiting 5s for history to become available.');
+        await sleep(5000);
+      }
+    }
+
+    function repatchIfNeeded() {
+      if (window.SteamClient.User.StartRestart !== patch.patchedFunction) {
+        rePatch();
+      }
+    }
+
+    const unlisten = History.listen(repatchIfNeeded);
+
+    // Just in case
+    setTimeout(repatchIfNeeded, 5000);
+    setTimeout(repatchIfNeeded, 10000);
+
+    return () => {
+      unlisten();
+      patch.unpatch();
+    };
+  } catch (e) {
+    logger.error('Error patching StartRestart', e);
+  }
+  return () => {};
+}

frontend/src/store.tsx

@@ -1,10 +1,16 @@
-import { ConfirmModal, showModal, staticClasses } from 'decky-frontend-lib';
-
 import { Plugin } from './plugin';
+import { getSetting, setSetting } from './utils/settings';
+
+export enum Store {
+  Default,
+  Testing,
+  Custom,
+}
 
 export interface StorePluginVersion {
   name: string;
   hash: string;
+  artifact: string | undefined | null;
 }
 
 export interface StorePlugin {
@@ -14,31 +20,49 @@ 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', {
-    method: 'GET',
-  }).then((r) => r.json());
+export async function getPluginList(): Promise<StorePlugin[]> {
+  let version = await window.DeckyPluginLoader.updateVersion();
+  let store = await getSetting<Store>('store', Store.Default);
+  let customURL = await getSetting<string>('store-url', 'https://plugins.deckbrew.xyz/plugins');
+  let storeURL;
+  if (!store) {
+    console.log('Could not get a default store, using Default.');
+    await setSetting('store-url', Store.Default);
+    return fetch('https://plugins.deckbrew.xyz/plugins', {
+      method: 'GET',
+      headers: {
+        'X-Decky-Version': version.current,
+      },
+    }).then((r) => r.json());
+  } else {
+    switch (+store) {
+      case Store.Default:
+        storeURL = 'https://plugins.deckbrew.xyz/plugins';
+        break;
+      case Store.Testing:
+        storeURL = 'https://testing.deckbrew.xyz/plugins';
+        break;
+      case Store.Custom:
+        storeURL = customURL;
+        break;
+      default:
+        console.error('Somehow you ended up without a standard URL, using the default URL.');
+        storeURL = 'https://plugins.deckbrew.xyz/plugins';
+        break;
+    }
+    return fetch(storeURL, {
+      method: 'GET',
+      headers: {
+        'X-Decky-Version': version.current,
+      },
+    }).then((r) => r.json());
+  }
 }
 
 export async function installFromURL(url: string) {
@@ -49,35 +73,12 @@ 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) {
+  const artifactUrl =
+    selectedVer.artifact ?? `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/versions/${selectedVer.hash}.zip`;
   await window.DeckyPluginLoader.callServerMethod('install_plugin', {
     name: plugin,
-    artifact: `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/versions/${selectedVer.hash}.zip`,
+    artifact: artifactUrl,
     version: selectedVer.name,
     hash: selectedVer.hash,
   });
@@ -94,7 +95,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.old.tsx

@@ -0,0 +1,119 @@
+// TabsHook for versions before the Desktop merge
+import { Patch, afterPatch, sleep } from 'decky-frontend-lib';
+import { memo } from 'react';
+
+import NewTabsHook from './tabs-hook';
+
+declare global {
+  interface Array<T> {
+    __filter: any;
+  }
+}
+
+const isTabsArray = (tabs: any) => {
+  const length = tabs.length;
+  return length >= 7 && tabs[length - 1]?.tab;
+};
+
+class TabsHook extends NewTabsHook {
+  // private keys = 7;
+  private quickAccess: any;
+  private tabRenderer: any;
+  private memoizedQuickAccess: any;
+  private cNode: any;
+
+  private qAPTree: any;
+  private rendererTree: any;
+
+  private cNodePatch?: Patch;
+
+  constructor() {
+    super();
+
+    this.log('Initialized stable TabsHook');
+  }
+
+  init() {
+    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;
+      }
+      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;
+        }
+        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');
+    })();
+  }
+
+  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();
+  }
+}
+
+export default TabsHook;

frontend/src/tabs-hook.tsx

@@ -1,5 +1,5 @@
-import { Patch, QuickAccessTab, afterPatch, sleep } from 'decky-frontend-lib';
-import { memo } from 'react';
+// TabsHook for versions after the Desktop merge
+import { Patch, QuickAccessTab, afterPatch, findInReactTree, sleep } from 'decky-frontend-lib';
 
 import { QuickAccessVisibleStateProvider } from './components/QuickAccessVisibleState';
 import Logger from './logger';
@@ -8,16 +8,8 @@ declare global {
   interface Window {
     __TABS_HOOK_INSTANCE: any;
   }
-  interface Array<T> {
-    __filter: any;
-  }
 }
 
-const isTabsArray = (tabs: any) => {
-  const length = tabs.length;
-  return length >= 7 && tabs[length - 1]?.tab;
-};
-
 interface Tab {
   id: QuickAccessTab | number;
   title: any;
@@ -28,15 +20,8 @@ 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 qAMRoot?: any;
+  private qamPatch?: Patch;
 
   constructor() {
     super('TabsHook');
@@ -44,86 +29,89 @@ class TabsHook extends Logger {
     this.log('Initialized');
     window.__TABS_HOOK_INSTANCE?.deinit?.();
     window.__TABS_HOOK_INSTANCE = this;
+  }
 
-    const self = this;
+  init() {
     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.',
-        );
+    let qAMRoot: any;
+    const findQAMRoot = (currentNode: any, iters: number): any => {
+      if (iters >= 55) {
+        // currently 45
         return null;
       }
-      currentNode = currentNode?.child;
-      if (currentNode?.type?.prototype?.RemoveSmartScrollContainer) {
-        self.log(`Scroll root was found in ${iters} recursion cycles`);
+      if (
+        typeof currentNode?.memoizedProps?.visible == 'boolean' &&
+        currentNode?.type?.toString()?.includes('QuickAccessMenuBrowserView')
+      ) {
+        this.log(`QAM 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 (currentNode.child) {
+        let node = findQAMRoot(currentNode.child, 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);
+      if (currentNode.sibling) {
+        let node = findQAMRoot(currentNode.sibling, iters + 1);
+        if (node !== null) return node;
       }
-      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;
-                };
+      return null;
+    };
+    (async () => {
+      qAMRoot = 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 = findQAMRoot(tree, 0);
+      }
+      this.qAMRoot = qAMRoot;
+      let patchedInnerQAM: any;
+      this.qamPatch = afterPatch(qAMRoot.return, 'type', (_: any, ret: any) => {
+        try {
+          if (!qAMRoot?.child) {
+            qAMRoot = findQAMRoot(tree, 0);
+            this.qAMRoot = qAMRoot;
+          }
+          if (qAMRoot?.child && !qAMRoot?.child?.type?.decky) {
+            afterPatch(qAMRoot.child, 'type', (_: any, ret: any) => {
+              try {
+                const qamTabsRenderer = findInReactTree(ret, (x) => x?.props?.onFocusNavDeactivated);
+                if (patchedInnerQAM) {
+                  qamTabsRenderer.type = patchedInnerQAM;
+                } else {
+                  afterPatch(qamTabsRenderer, 'type', (innerArgs: any, ret: any) => {
+                    const tabs = findInReactTree(ret, (x) => x?.props?.tabs);
+                    this.render(tabs.props.tabs, innerArgs[0].visible);
+                    return ret;
+                  });
+                  patchedInnerQAM = qamTabsRenderer.type;
+                }
+              } catch (e) {
+                this.error('Error patching QAM inner', e);
               }
-              this.rendererTree = ret.props.children[1].children;
-              ret.props.children[1].children.type = newQATabRenderer;
-            }
-            return ret;
-          };
-          this.memoizedQuickAccess = memo(newQA);
-          this.memoizedQuickAccess.isDeckyQuickAccess = true;
-        }
-        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;
+            });
+            qAMRoot.child.type.decky = true;
+            qAMRoot.child.alternate.type = qAMRoot.child.type;
+          }
+        } catch (e) {
+          this.error('Error patching QAM', e);
         }
+
         return ret;
       });
-      this.cNode = scrollRoot;
-      this.cNode.stateNode.forceUpdate();
+
+      if (qAMRoot.return.alternate) {
+        qAMRoot.return.alternate.type = qAMRoot.return.type;
+      }
       this.log('Finished initial injection');
     })();
   }
 
   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();
+    this.qamPatch?.unpatch();
+    this.qAMRoot.return.alternate.type = this.qAMRoot.return.type;
   }
 
   add(tab: Tab) {
@@ -137,12 +125,24 @@ class TabsHook extends Logger {
   }
 
   render(existingTabs: any[], visible: boolean) {
+    let deckyTabAmount = existingTabs.reduce((prev: any, cur: any) => (cur.decky ? prev + 1 : prev), 0);
+    if (deckyTabAmount == this.tabs.length) {
+      for (let tab of existingTabs) {
+        if (tab?.decky) tab.panel.props.setter[0](visible);
+      }
+      return;
+    }
     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 initial={visible} setter={[]}>
+            {content}
+          </QuickAccessVisibleStateProvider>
+        ),
       });
     }
   }

frontend/src/toaster.tsx

@@ -1,4 +1,4 @@
-import { Patch, ToastData, afterPatch, findInReactTree, findModuleChild, sleep } from 'decky-frontend-lib';
+import { Module, Patch, ToastData, afterPatch, findInReactTree, findModuleChild, sleep } from 'decky-frontend-lib';
 import { ReactNode } from 'react';
 
 import Toast from './components/Toast';
@@ -7,18 +7,24 @@ import Logger from './logger';
 declare global {
   interface Window {
     __TOASTER_INSTANCE: any;
+    settingsStore: any;
     NotificationStore: any;
   }
 }
 
 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;
+  private rNode: any;
+  private audioModule: any;
+  private finishStartup?: () => void;
+  private ready: Promise<void> = new Promise((res) => (this.finishStartup = res));
+  private toasterPatch?: Patch;
 
   constructor() {
     super('Toaster');
+    // this.routerHook = routerHook;
 
     window.__TOASTER_INSTANCE?.deinit?.();
     window.__TOASTER_INSTANCE = this;
@@ -26,88 +32,154 @@ class Toaster extends Logger {
   }
 
   async init() {
+    // 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'),
+    const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
+    const findToasterRoot = (currentNode: any, iters: number): any => {
+      if (iters >= 50) {
+        // currently 40
+        return null;
+      }
+      if (currentNode?.memoizedProps?.className?.startsWith?.('toastmanager_ToastPlaceholder')) {
+        this.log(`Toaster root was found in ${iters} recursion cycles`);
+        return currentNode;
+      }
+      if (currentNode.sibling) {
+        let node = findToasterRoot(currentNode.sibling, iters + 1);
+        if (node !== null) return node;
+      }
+      if (currentNode.child) {
+        let node = findToasterRoot(currentNode.child, iters + 1);
+        if (node !== null) return node;
+      }
+      return null;
+    };
+    instance = findToasterRoot(tree, 0);
+    while (!instance) {
+      this.error(
+        'Failed to find Toaster root node, reattempting in 5 seconds. A developer may need to increase the recursion limit.',
       );
-      if (instance) break;
-      this.debug('finding instance');
-      await sleep(2000);
+      await sleep(5000);
+      instance = findToasterRoot(tree, 0);
     }
-
-    this.node = instance.return.return;
+    this.node = instance.return;
+    this.rNode = this.node.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;
+    let innerPatched: any;
+    const repatch = () => {
+      if (this.node && !this.node.type.decky) {
+        this.toasterPatch = afterPatch(this.node, 'type', (_: any, ret: any) => {
+          const inner = findInReactTree(ret.props.children, (x) => x?.props?.onDismiss);
+          if (innerPatched) {
+            inner.type = innerPatched;
+          } else {
+            afterPatch(inner, 'type', (innerArgs: any, ret: any) => {
+              const currentToast = innerArgs[0]?.notification;
+              if (currentToast?.decky) {
+                if (currentToast == toast) {
+                  ret.props.children = renderedToast;
+                } else {
+                  toast = currentToast;
+                  renderedToast = <Toast toast={toast.data} />;
+                  ret.props.children = renderedToast;
+                }
               } else {
-                toast = currentToast;
-                renderedToast = <Toast toast={toast} />;
-                ret.props.children[1].children = renderedToast;
+                toast = null;
+                renderedToast = null;
               }
-            } else {
-              toast = null;
-              renderedToast = null;
-            }
+              return ret;
+            });
+            innerPatched = inner.type;
           }
           return ret;
         });
-        this.node.stateNode.shouldComponentUpdate = () => {
-          return false;
-        };
-        delete this.node.stateNode.render;
+        this.node.type.decky = true;
+        this.node.alternate.type = this.node.type;
       }
+    };
+    const oRender = this.rNode.stateNode.__proto__.render;
+    let int: NodeJS.Timer | undefined;
+    this.rNode.stateNode.render = (...args: any[]) => {
+      const ret = oRender.call(this.rNode.stateNode, ...args);
+      if (ret && !this?.node?.return?.return) {
+        clearInterval(int);
+        int = setInterval(() => {
+          const n = findToasterRoot(tree, 0);
+          if (n?.return) {
+            clearInterval(int);
+            this.node = n.return;
+            this.rNode = this.node.return;
+            repatch();
+          } else {
+            this.error('Failed to re-grab Toaster node, trying again...');
+          }
+        }, 1200);
+      }
+      repatch();
       return ret;
     };
-    this.node.stateNode.forceUpdate();
-    this.settingsModule = findModuleChild((m) => {
+
+    this.rNode.stateNode.shouldComponentUpdate = () => true;
+    this.rNode.stateNode.forceUpdate();
+    delete this.rNode.stateNode.shouldComponentUpdate;
+
+    this.audioModule = findModuleChild((m: Module) => {
       if (typeof m !== 'object') return undefined;
       for (let prop in m) {
-        if (typeof m[prop]?.settings && m[prop]?.communityPreferences) return m[prop];
+        try {
+          if (m[prop].PlayNavSound && m[prop].RegisterCallbackOnPlaySound) return m[prop];
+        } catch {
+          return undefined;
+        }
       }
     });
+
     this.log('Initialized');
-    this.ready = true;
+    this.finishStartup?.();
   }
 
   async toast(toast: ToastData) {
-    while (!this.ready) {
-      await sleep(100);
-    }
-    const settings = this.settingsModule?.settings;
+    // toast.duration = toast.duration || 5e3;
+    // this.toasterState.addToast(toast);
+    await this.ready;
     let toastData = {
       nNotificationID: window.NotificationStore.m_nNextTestNotificationID++,
       rtCreated: Date.now(),
-      eType: 15,
-      nToastDurationMS: toast.duration || 5e3,
+      eType: toast.eType || 11,
+      nToastDurationMS: toast.duration || (toast.duration = 5e3),
       data: toast,
       decky: true,
     };
     // @ts-ignore
     toastData.data.appid = () => 0;
+    if (toast.sound === undefined) toast.sound = 6;
+    if (toast.playSound === undefined) toast.playSound = true;
+    if (toast.showToast === undefined) toast.showToast = true;
     if (
-      (settings?.bDisableAllToasts && !toast.critical) ||
-      (settings?.bDisableToastsInGame && !toast.critical && window.NotificationStore.BIsUserInGame())
+      (window.settingsStore.settings.bDisableAllToasts && !toast.critical) ||
+      (window.settingsStore.settings.bDisableToastsInGame &&
+        !toast.critical &&
+        window.NotificationStore.BIsUserInGame())
     )
       return;
-    window.NotificationStore.m_rgNotificationToasts.push(toastData);
-    window.NotificationStore.DispatchNextToast();
+    if (toast.playSound) this.audioModule?.PlayNavSound(toast.sound);
+    if (toast.showToast) {
+      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.toasterPatch?.unpatch();
+    this.node.alternate.type = this.node.type;
+    delete this.rNode.stateNode.render;
+    this.ready = new Promise((res) => (this.finishStartup = res));
+    // this.routerHook.removeGlobalComponent('DeckyToaster');
   }
 }
 

frontend/src/updater.ts

@@ -1,7 +1,7 @@
 export enum Branches {
   Release,
   Prerelease,
-  Nightly,
+  // Testing,
 }
 
 export interface DeckyUpdater {

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;
+}