refactor(gui): remove the Services system, flatten into plain singleton modules

src/backend/services/homepage/PuterHomepageService.ts

@@ -68,8 +68,6 @@ interface PuterGuiAddonsEvent {
  * Serves the root HTML shell that bootstraps the Puter GUI.
  *
  * Extensions contribute by:
- *   - `registerScript(url)` — adds a `<script type="module" src=...>` tag
- *     after the GUI init script.
  *   - `setGuiParam(key, value)` — injects a value into the client-side
  *     `gui()` call.
  *   - Listening for `puter.gui.addons` — mutate the event object's
@@ -78,7 +76,6 @@ interface PuterGuiAddonsEvent {
  */
 export class PuterHomepageService extends PuterService {
     #manifest: Manifest | null = null;
-    #serviceScripts: string[] = [];
     #guiParams: Record<string, unknown> = {};
 
     override async onServerStart(): Promise<void> {
@@ -102,10 +99,6 @@ export class PuterHomepageService extends PuterService {
         }
     }
 
-    registerScript(url: string): void {
-        this.#serviceScripts.push(url);
-    }
-
     setGuiParam(key: string, val: unknown): void {
         this.#guiParams[key] = val;
     }
@@ -253,10 +246,6 @@ export class PuterHomepageService extends PuterService {
                       .join('\n')
                 : '';
 
-        const serviceScriptTags = this.#serviceScripts
-            .map((url) => `<script type="module" src="${url}"></script>`)
-            .join('\n');
-
         const guiParamsJson = JSON.stringify(guiParams).replace(
             /</g,
             '\\u003c',
@@ -310,22 +299,6 @@ export class PuterHomepageService extends PuterService {
 
     <link rel="preload" as="image" href="https://puter-assets.b-cdn.net/wallpaper.webp">
 
-    <script>
-        if ( ! window.service_script ) {
-            window.service_script_api_promise = (() => {
-                let resolve, reject;
-                const promise = new Promise((res, rej) => { resolve = res; reject = rej; });
-                promise.resolve = resolve;
-                promise.reject = reject;
-                return promise;
-            })();
-            window.service_script = async fn => {
-                try { await fn(await window.service_script_api_promise); }
-                catch (e) { console.error('service_script(ERROR)', e); }
-            };
-        }
-    </script>
-
     ${manifestCss}
 
     ${event.headContent}
@@ -341,7 +314,6 @@ export class PuterHomepageService extends PuterService {
         gui(${guiParamsJson});
     });
     </script>
-    ${serviceScriptTags}
     <div id="templates" style="display: none;"></div>
 
     ${event.bodyContent}

src/gui/src/IPC.js

@@ -37,6 +37,8 @@ import UIWindowSignup from './UI/UIWindowSignup.js';
 import UINotification from './UI/UINotification.js';
 
 import { PROCESS_IPC_ATTACHED } from './definitions.js';
+import { process_service } from './modules/process.js';
+import { ipc_service } from './modules/ipc.js';
 import TeePromise from './util/TeePromise.js';
 
 window.ipc_handlers = {};
@@ -113,9 +115,6 @@ const ipc_listener = async (event, handled) => {
     // New IPC handlers should be registered here.
     // Do this by calling `register_ipc_handler` of IPCService.
     if ( window.ipc_handlers.hasOwnProperty(event.data.msg) ) {
-        const services = globalThis.services;
-        const svc_process = services.get('process');
-
         // Add version info to old puter.js messages
         // (and coerce them into the format of new ones)
         if ( event.data.$ === undefined ) {
@@ -130,7 +129,7 @@ const ipc_listener = async (event, handled) => {
 
         // The IPC context contains information about the call
         const iframe = window.iframe_for_app_instance(event.data.appInstanceID);
-        const process = svc_process.get_by_uuid(event.data.appInstanceID);
+        const process = process_service.get_by_uuid(event.data.appInstanceID);
         const ipc_context = {
             caller: {
                 process: process,
@@ -162,9 +161,7 @@ const ipc_listener = async (event, handled) => {
     // READY
     //-------------------------------------------------
     if ( event.data.msg === 'READY' ) {
-        const services = globalThis.services;
-        const svc_process = services.get('process');
-        const process = svc_process.get_by_uuid(event.data.appInstanceID);
+        const process = process_service.get_by_uuid(event.data.appInstanceID);
 
         process.ipc_status = PROCESS_IPC_ATTACHED;
     }
@@ -1888,10 +1885,7 @@ const ipc_listener = async (event, handled) => {
         const { appInstanceID, targetAppInstanceID, targetAppOrigin, contents } = event.data;
         // TODO: Determine if we should allow the message
         // TODO: Track message traffic between apps
-        const svc_ipc = globalThis.services.get('ipc');
-        // const svc_exec = globalThis.services()
-
-        const conn = svc_ipc.get_connection(targetAppInstanceID);
+        const conn = ipc_service.get_connection(targetAppInstanceID);
         if ( conn ) {
             conn.send(contents);
             return;

src/gui/src/UI/UIDesktop.js

@@ -18,6 +18,7 @@
  */
 
 import path from '../lib/path.js';
+import { process_service } from '../modules/process.js';
 
 import UIContextMenu from './UIContextMenu.js';
 import UIItem from './UIItem.js';
@@ -1262,7 +1263,7 @@ async function UIDesktop (options) {
     // GUI is ready to launch apps!
     //-----------------------------
     window.dispatchEvent(new CustomEvent('desktop:ready'));
-    globalThis.services.emit('gui:ready');
+    process_service.on_gui_ready();
 
     //--------------------------------------------------------
     // Open the AI app (best-effort — the `ai` app isn't seeded

src/gui/src/UI/UIWindowManageSessions.js

@@ -17,6 +17,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { anti_csrf_service } from '../modules/anti-csrf.js';
+
 // Renders the Session Manager as a self-contained, responsive modal (a plain
 // DOM overlay) rather than a draggable UIWindow. Confirmations are shown as
 // in-modal sheets instead of UIAlert windows, so nothing here depends on the
@@ -94,8 +96,6 @@ const kindBadgeLabel = (kind) => {
 const UIWindowManageSessions = async function UIWindowManageSessions (options) {
     options = options ?? {};
 
-    const services = globalThis.services;
-
     // =====================================================================
     // Responsive modal shell
     // =====================================================================
@@ -450,7 +450,7 @@ const UIWindowManageSessions = async function UIWindowManageSessions (options) {
                 session.label = next || null;
                 el_title.textContent = sessionTitle(session);
                 try {
-                    const anti_csrf = await services.get('anti-csrf').token();
+                    const anti_csrf = await anti_csrf_service.token();
                     const resp = await fetch(
                         `${window.api_origin}/auth/sessions/${encodeURIComponent(session.uuid)}/label`,
                         {
@@ -558,7 +558,7 @@ const UIWindowManageSessions = async function UIWindowManageSessions (options) {
                     });
                     if ( ! ok ) return;
 
-                    const anti_csrf = await services.get('anti-csrf').token();
+                    const anti_csrf = await anti_csrf_service.token();
 
                     // Route access-token rows to the dedicated endpoint
                     // so `access_token_permissions` is cleared in addition
@@ -732,7 +732,7 @@ const UIWindowManageSessions = async function UIWindowManageSessions (options) {
             });
             if ( ! ok ) return;
 
-            const anti_csrf = await services.get('anti-csrf').token();
+            const anti_csrf = await anti_csrf_service.token();
             const resp = await fetch(
                 `${window.api_origin}/auth/revoke-all-sessions`,
                 {

src/gui/src/UI/UIWindowNewPassword.js

@@ -19,6 +19,7 @@
 
 import UIWindow from './UIWindow.js';
 import UIAlert from './UIAlert.js';
+import { locale_service } from '../modules/locale.js';
 import UIWindowLogin from './UIWindowLogin.js';
 import check_password_strength from '../helpers/check_password_strength.js';
 
@@ -122,8 +123,7 @@ async function UIWindowNewPassword (options) {
                 return;
             }
 
-            const svc_locale = globalThis.services.get('locale');
-            const countdown = svc_locale.format_duration(time_remaining);
+            const countdown = locale_service.format_duration(time_remaining);
 
             $(el_window).find('.change-password-btn').html(`Set New Password (${countdown})`);
         }, 1000);

src/gui/src/UI/UIWindowTaskManager.js

@@ -17,12 +17,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 import { END_HARD, END_SOFT } from '../definitions.js';
+import { process_service } from '../modules/process.js';
 import UIAlert from './UIAlert.js';
 import UIContextMenu from './UIContextMenu.js';
 import UIWindow from './UIWindow.js';
 
 const end_process = async (uuid, force) => {
-    const svc_process = globalThis.services.get('process');
+    const svc_process = process_service;
     const process = svc_process.get_by_uuid(uuid);
     if ( ! process ) {
         console.warn(`Can't end process with uuid='${uuid}': does not exist`);
@@ -86,7 +87,7 @@ const calculate_indent_string = (indent_level, is_last_item_stack, is_last_item)
 };
 
 const generate_task_rows = (items, { indent_level, is_last_item_stack }) => {
-    const svc_process = globalThis.services.get('process');
+    const svc_process = process_service;
     let rows_html = '';
 
     for ( let i = 0; i < items.length; i++ ) {
@@ -141,7 +142,7 @@ const generate_task_rows = (items, { indent_level, is_last_item_stack }) => {
 };
 
 const UIWindowTaskManager = async function UIWindowTaskManager () {
-    const svc_process = globalThis.services.get('process');
+    const svc_process = process_service;
 
     let h = '';
 

src/gui/src/UI/UIWindowThemeDialog.js

@@ -18,11 +18,11 @@
  */
 import { UIColorPickerWidget, hslaToHex8 } from './UIColorPickerWidget.js';
 import UIWindow from './UIWindow.js';
+import { theme_service } from '../modules/theme.js';
 
 const UIWindowThemeDialog = async function UIWindowThemeDialog (options) {
     options = options ?? {};
-    const services = globalThis.services;
-    const svc_theme = services.get('theme');
+    const svc_theme = theme_service;
 
     // Get current theme values and convert to hex8 for the color picker
     const currentHue = svc_theme.get('hue');

src/gui/src/definitions.js

@@ -19,40 +19,7 @@
 
 import TeePromise from './util/TeePromise.js';
 import AdvancedBase from './util/AdvancedBase.js';
-
-const NOOP = async () => {
-};
-
-export class Service extends AdvancedBase {
-    // TODO: Service todo items
-    static TODO = [
-        'consolidate with BaseService from backend',
-    ];
-    async __on (id, args) {
-        const handler = this.__get_event_handler(id);
-
-        return await handler(id, ...args);
-    }
-    __get_event_handler (id) {
-        return this[`__on_${id}`]?.bind?.(this)
-            || this.constructor[`__on_${id}`]?.bind?.(this.constructor)
-            || NOOP;
-    }
-    construct (o) {
-        this.$puter = {};
-        for ( const k in o ) this.$puter[k] = o[k];
-        if ( ! this._construct ) return;
-        return this._construct();
-    }
-    init (...a) {
-        if ( ! this._init ) return;
-        this.services = a[0].services;
-        return this._init(...a);
-    }
-    get context () {
-        return { services: this.services };
-    }
-};
+import { process_service } from './modules/process.js';
 
 export const PROCESS_INITIALIZING = { i18n_key: 'initializing' };
 export const PROCESS_RUNNING = { i18n_key: 'running' };
@@ -137,8 +104,7 @@ export class InitProcess extends Process {
     }
 
     _signal (sig) {
-        const svc_process = globalThis.services.get('process');
-        for ( const process of svc_process.processes ) {
+        for ( const process of process_service.processes ) {
             if ( process === this ) continue;
             process.signal(sig);
         }

src/gui/src/helpers.js

@@ -25,6 +25,7 @@ import update_title_based_on_uploads from './helpers/update_title_based_on_uploa
 import update_username_in_gui from './helpers/update_username_in_gui.js';
 import mime from './lib/mime.js';
 import path from './lib/path.js';
+import { broadcast_service } from './modules/broadcast.js';
 import UIAlert from './UI/UIAlert.js';
 import UIItem from './UI/UIItem.js';
 import UIWindowLogin from './UI/UIWindowLogin.js';
@@ -719,8 +720,7 @@ window.update_user_preferences = function (user_preferences) {
     window.locale = language;
 
     // Broadcast locale change to apps
-    const broadcastService = globalThis.services.get('broadcast');
-    broadcastService.sendBroadcast('localeChanged', {
+    broadcast_service.sendBroadcast('localeChanged', {
         language: language,
     }, { sendToNewAppInstances: true });
 };
@@ -3271,7 +3271,7 @@ window.iframe_for_app_instance = (instance_id) => {
 };
 
 // Run any callbacks to say that the app has closed
-// ref(./services/ExecService.js): this is called from ExecService.js on
+// ref(./modules/exec.js): this is called from the exec module on
 //   close if the app does not use puter.js
 window.report_app_closed = (instance_id, status_code) => {
     const el_window = window.window_for_app_instance(instance_id);

src/gui/src/helpers/launch_app.js

@@ -19,6 +19,8 @@
 
 import path from '../lib/path.js';
 import { PROCESS_IPC_ATTACHED, PROCESS_RUNNING, PortalProcess, PseudoProcess } from '../definitions.js';
+import { process_service } from '../modules/process.js';
+import { broadcast_service } from '../modules/broadcast.js';
 import UIWindow from '../UI/UIWindow.js';
 
 const normalizePrivateAccessDecision = (privateAccess) => {
@@ -295,7 +297,7 @@ const launch_app = async (options) => {
                 app_info: app_info,
             },
         });
-        const svc_process = globalThis.services.get('process');
+        const svc_process = process_service;
         svc_process.register(process);
         if ( options.path === window.home_path ) {
             title = i18n('home');
@@ -367,7 +369,7 @@ const launch_app = async (options) => {
                 app_info: app_info,
             },
         });
-        const svc_process = globalThis.services.get('process');
+        const svc_process = process_service;
         svc_process.register(process);
 
         //-----------------------------------
@@ -691,7 +693,7 @@ const launch_app = async (options) => {
             $(process.references.iframe).attr('data-appUsesSDK', 'true');
 
             // Send any saved broadcasts to the new app
-            globalThis.services.get('broadcast').sendSavedBroadcastsTo(uuid);
+            broadcast_service.sendSavedBroadcastsTo(uuid);
 
             // If `window-active` is set (meaning the window is focused), focus the window one more time
             // this is to ensure that the iframe is `definitely` focused and can receive keyboard events (e.g. keydown)
@@ -704,7 +706,7 @@ const launch_app = async (options) => {
     process.chstatus(PROCESS_RUNNING);
 
     $(el).on('remove', () => {
-        const svc_process = globalThis.services.get('process');
+        const svc_process = process_service;
         svc_process.unregister(process.uuid);
     });