ArcOS-Project · Blockyheadman · Jul 7, 2026 · Jul 8, 2026 · Jul 9, 2026 · Jul 10, 2026
diff --git a/index.html b/index.html
@@ -1,33 +1,35 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/logo-dm.svg" media="(prefers-color-scheme: dark)" />
-    <link rel="icon" type="image/svg+xml" href="/logo-lm.svg" media="(prefers-color-scheme: light)" />
-    <link rel="manifest" href="/manifest.webmanifest" />
-    <link rel="stylesheet" href="/preboot.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="robots" content="noindex, nofollow" />
-    <title>ArcOS</title>
 
-    <link rel="stylesheet" id="stateCSSLoader" />
-    <style>
-      html,
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        background-color: #000;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="kernelLog"></div>
-    <main id="main">
-      <div id="stateLoader" class="fullscreen">.</div>
-      <div id="appRenderer"></div>
-    </main>
-    <script type="module" src="/src/main.ts"></script>
-    <script src="/preboot.js"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/logo-dm.svg" media="(prefers-color-scheme: dark)" />
+  <link rel="icon" type="image/svg+xml" href="/logo-lm.svg" media="(prefers-color-scheme: light)" />
+  <link rel="manifest" href="/manifest.webmanifest" />
+  <link rel="stylesheet" href="/preboot.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="robots" content="noindex, nofollow" />
+  <title>ArcOS</title>
+
+  <link rel="stylesheet" id="stateCSSLoader" />
+  <style>
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="kernelLog"></div>
+  <main id="main">
+    <div id="stateLoader" class="fullscreen">.</div>
+    <div id="appRenderer"></div>
+  </main>
+  <script type="module" src="/src/main.ts"></script>
+  <script src="/preboot.js"></script>
+</body>
+
+</html>
diff --git a/src/apps/components/fsprogress/runtime.ts b/src/apps/components/fsprogress/runtime.ts
@@ -1,5 +1,6 @@
 import type { IFsProgressRuntime } from "$interfaces/runtimes/IFsProgressRuntime";
 import { AppProcess } from "$ts/apps/process";
+import { IsElectron } from "$ts/electron";
 import { Stack } from "$ts/env";
 import { Store } from "$ts/writable";
 import type { AppProcessData } from "$types/apps/app";
@@ -29,6 +30,10 @@ export class FsProgressRuntime extends AppProcess implements IFsProgressRuntime
       this.windowTitle.set(v.caption);
       this.windowIcon.set(v.icon);
 
+      if (IsElectron()) {
+        electron!.updateIconProgress(v.done, v.max);
+      }
+
       if (v.done >= v.max && v.max > 0 && !v.errors.length) {
         await this.closeWindow(); // Close the window if pending operations are done
 
@@ -48,6 +53,10 @@ export class FsProgressRuntime extends AppProcess implements IFsProgressRuntime
   async onClose(): Promise<boolean> {
     if (this.parentPid) Stack.renderer?.focusedPid.set(this.parentPid); // Focus the parent PID upon close
 
+    if (IsElectron()) {
+      electron!.updateIconProgress(0, 0);
+    }
+
     return true;
   }
 

diff --git a/src/apps/core/loginapp/runtime.ts b/src/apps/core/loginapp/runtime.ts
@@ -251,7 +251,7 @@ export class LoginAppRuntime extends AppProcess implements ILoginAppRuntime {
       broadcast("Stopping User Daemon");
       await userDaemon.killSelf();
     }
-    State?.loadState("turnedOff");
+    await State?.loadState("turnedOff");
   }
 
   async restart(userDaemon?: IUserDaemon) {

diff --git a/src/css/apps/core/bootscreen.css b/src/css/apps/core/bootscreen.css
@@ -3,7 +3,7 @@
   --bg: #000;
 }
 
-div.window#bootScreen > div.body {
+div.window#bootScreen>div.body {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -14,11 +14,11 @@ div.window#bootScreen > div.body {
   justify-content: space-around;
 }
 
-div.window#bootScreen div.body > img {
+div.window#bootScreen div.body>img {
   height: 200px;
 }
 
-div.window#bootScreen div.body > img.gray {
+div.window#bootScreen div.body>img.gray {
   filter: grayscale(50%);
   background-image: url("../../../assets/branding/glow-red.png");
 }
@@ -58,7 +58,7 @@ div.window#bootScreen div.bottom {
 }
 
 div.window#bootScreen div.top {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
@@ -83,4 +83,4 @@ div.window#bootScreen div.top div.keys div.row div.key {
   font-weight: bold;
   opacity: 0.5;
   width: 20px;
-}
+}
diff --git a/src/css/electron.css b/src/css/electron.css
@@ -0,0 +1,108 @@
+@import url("./themes.css");
+
+@property --electron-titlebar-height {
+  syntax: "<length> | <percentage>";
+  inherits: false;
+  initial-value: 40px;
+}
+
+:root {
+  --electron-titlebar-height: 40px;
+}
+
+body.electron-app {
+  overflow: hidden;
+  transform: translateZ(0);
+  border-radius: 0px;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: border-radius .2s;
+  }
+
+  &.transparent {
+    background-color: transparent;
+  }
+
+}
+
+/* Please, PLEASE don't judge me for this. it works.
+ * It's just a way for me to check if the titlebar is
+ * hidden or not and affect the apprenderer size
+ */
+body:has(#electron-titlebar.hidden) #appRenderer.electron-app {
+  height: 100%;
+}
+
+body.electron-app.rounded {
+  border-radius: var(--win-border-rad)
+}
+
+#appRenderer.electron-app {
+  top: unset;
+  bottom: 0;
+  height: calc(100% - var(--electron-titlebar-height));
+}
+
+#electron-titlebar {
+  display: flex;
+  position: relative;
+  top: 0;
+
+  height: var(--electron-titlebar-height);
+  width: 100%;
+
+  z-index: 10000 !important;
+  padding: .75rem;
+
+  app-region: drag;
+
+  user-select: none;
+
+  background-color: var(--glass-bg);
+  backdrop-filter: blur(4px);
+
+  &.hidden {
+    display: none;
+
+    ~#appRenderer.electron-app {
+      height: 100%;
+    }
+  }
+
+}
+
+#electron-titlebar>.window-title {
+  flex: 1;
+  display: inline-flex;
+  gap: .5rem;
+
+  &>img {
+    height: 100%;
+  }
+
+  &>span {
+    align-self: center;
+    font-size: 1.15rem;
+  }
+}
+
+#electron-titlebar>.controls {
+  align-self: center;
+
+  & button {
+    margin: 0;
+    padding: .15rem;
+    font-size: 1.15rem;
+    border: none;
+    aspect-ratio: 1;
+    background-color: transparent;
+    color: var(--fg);
+    transition: opacity 0.2s;
+
+    app-region: no-drag;
+
+    &:hover {
+      color: var(--accent-light);
+    }
+  }
+}
diff --git a/src/css/main.css b/src/css/main.css
@@ -23,6 +23,7 @@
 @import url("./state/serverdown.css");
 @import url("./state/turnedoff.css");
 @import url("./state/arcterm.css");
+@import url("./electron.css");
 
 html,
 body {
@@ -85,7 +86,7 @@ main#main.hidden #appRenderer {
   font-family: var(--user-font, "Nunito Sans"), "Nunito Sans";
 }
 
-#appRenderer > div.window:not(.core) {
+#appRenderer>div.window:not(.core) {
   pointer-events: initial;
 }
 
@@ -99,6 +100,7 @@ main#main.hidden #appRenderer {
     opacity: 1;
   }
 }
+
 .blink {
   animation: blink 1s step-start 0s infinite;
 }
@@ -131,4 +133,4 @@ span.beta-pill {
 
 [class*="theme-"] {
   color: var(--fg);
-}
+}
diff --git a/src/lib/ElectronTitleBar.svelte b/src/lib/ElectronTitleBar.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { IsElectron } from "$ts/electron";
+  import { ReleaseLogo } from "$ts/images/branding";
+
+  function maximize() {
+    if (IsElectron()) electron?.maximizeWindow();
+  }
+
+  function minimize() {
+    if (IsElectron()) electron?.minimizeWindow();
+  }
+
+  function close() {
+    if (IsElectron()) electron?.closeWindow();
+  }
+</script>
+
+<div id="electron-titlebar">
+  <div class="window-title">
+    <img src={ReleaseLogo} alt="ArcOS logo" />
+    <span>{document.title}</span>
+  </div>
+  <div class="controls">
+    <button class="minimize icon-chevron-down" aria-label="minimize" onclick={minimize}></button>
+    <button class="maximize icon-chevron-up" aria-label="maximize" onclick={maximize}></button>
+    <button class="close icon-x" aria-label="close" onclick={close}></button>
+  </div>
+</div>
diff --git a/src/main.ts b/src/main.ts
@@ -1,8 +1,11 @@
 import "dseg/css/dseg.css";
 import "./css/main.css";
+import { handleElectronInit } from "$ts/electron";
 
 // CODE EXECUTION STARTS HERE
 async function Main() {
+  await handleElectronInit();
+
   const { WaveKernel } = await import("$ts/kernel/wavekernel");
 
   const kernel = new WaveKernel();

diff --git a/src/ts/apps/renderer.ts b/src/ts/apps/renderer.ts
@@ -18,6 +18,7 @@ import { Store } from "../writable";
 import { AppRendererError } from "./error";
 import { BuiltinAppImportPathAbsolutes } from "./store";
 import { Sleep } from "$ts/sleep";
+import { IsElectron } from "$ts/electron";
 
 export class AppRenderer extends Process implements IAppRenderer {
   currentState: number[] = [];
@@ -66,6 +67,10 @@ export class AppRenderer extends Process implements IAppRenderer {
 
     if (process._disposed) return;
 
+    if (IsElectron()) {
+      this.target.classList.add("electron-app");
+    }
+
     this.Log(`Rendering PID ${process.pid}`);
 
     renderTarget ||= this.target;

diff --git a/src/ts/daemon/contexts/apprenderer.ts b/src/ts/daemon/contexts/apprenderer.ts
@@ -1,5 +1,6 @@
 import type { IAppRendererUserContext } from "$interfaces/contexts/IAppRendererUserContext";
 import type { IUserDaemon } from "$interfaces/IUserDaemon";
+import { IsElectron } from "$ts/electron";
 import { Daemon, Stack } from "$ts/env";
 import { bestForeground, darkenColor, hex3to6, invertColor, lightenColor } from "$ts/util/color";
 import type { CustomStylePreferences, UserPreferences } from "$types/user";
@@ -59,6 +60,12 @@ export class AppRendererUserContext extends UserContext implements IAppRendererU
     renderer.classList.toggle("safe-mode", this.safeMode);
     renderer.classList.toggle("traffic-lights", v.shell.visuals.trafficLights);
     renderer.classList.toggle("hide-altmenus", v.shell.visuals.hideAltmenus);
+
+    if (IsElectron()) {
+      renderer.classList.add("electron-app");
+      const titleBar = document.getElementById("electron-titlebar")! as HTMLDivElement;
+      titleBar.setAttribute("style", style);
+    }
   }
 
   setUserStyleLoader(style: CustomStylePreferences) {

diff --git a/src/ts/daemon/contexts/notifications.ts b/src/ts/daemon/contexts/notifications.ts
@@ -1,6 +1,9 @@
 import type { INotificationsUserContext } from "$interfaces/contexts/INotificationsUserContext";
 import type { IUserDaemon } from "$interfaces/IUserDaemon";
+import { Logo } from "$ts/branding";
+import { IsElectron } from "$ts/electron";
 import { SysDispatch } from "$ts/env";
+import type { IconService } from "$ts/servicehost/services/IconService";
 import type { Notification } from "$types/system/notification";
 import { UserContext } from "../context";
 
@@ -24,6 +27,13 @@ export class NotificationsUserContext extends UserContext implements INotificati
     SysDispatch.dispatch("update-notifications", [this.notifications]);
     SysDispatch.dispatch("send-notification", [data]);
 
+    const iconService = this.serviceHost?.getService<IconService>("IconService");
+
+    if (IsElectron()) {
+      electron!.sendNotification(data);
+      // if (iconService && data.icon) electron.sendNotification(data, await iconService.getIcon(data.icon));
+      // else electron.sendNotification(data, Logo());
+    }
     return id;
   }